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

这应该是你想要的： 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();
    }
});

Answer 2

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

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

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

2 个答案: