如果选中输入类型复选框，则创建和删除输入类型文本

Question

我有问题，我需要根据需要创建或删除输入类型文本（如果选择了输入类型复选框）。

目前我只能创建输入文本，但我设法找到了清除复选框未选中的解决方案。

我的HTML代码：

<form role="form" action="" method="POST">
  <input type="checkbox" class="myCheckBox" name="category[]" value="1">
  <input type="checkbox" class="myCheckBox" name="category[]" value="2">
  <input type="checkbox" class="myCheckBox" name="category[]" value="3">
  <input type="checkbox" class="myCheckBox" name="category[]" value="4">
  <input type="checkbox" class="myCheckBox" name="category[]" value="5">
  <div class="inputCreate"></div>
  <input type="submit" name="" value="Send yours categories">
</form>

而jQuery代码如下

     var wrapper = $(".inputCreate");

$('.myCheckBox').click(function() {
    if ($(this).is(':checked')) {
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
    }
});

我可以通过取消选中复选框来做到这一点，同时删除输入文本字段 ?。

这个问题的解决方案：

var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
    if($(this).is(':checked')){
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
    }
    else{
        $('.inputCreate :last-child').remove();
    }
});

来自智利的问候。

Answer 1

试试这个。如果未选中复选框，我假设您想删除文本框。

$('.myCheckBox').click(function() { 
     if ($(this).is(':checked')) { 
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="">'); 
     }else{ 
         $(wrapper).find('input').remove();
     }
 });

Answer 2

这应该正是您想要的： Working Fiddle

var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
    if($(this).is(':checked')){
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="'+$(this).val()+'">');
    }
    else{
        $('.inputCreate :last-child').remove();
    }
});

如果选中输入类型复选框，则创建和删除输入类型文本

Create and Delete input type text if the selected input type checkbox

javascript

checkbox

jquery

input