Question

我创建了一个脚本，在选中复选框时会创建一个表单元素。但是，当我取消选中复选框，然后再次检查它。创建一个新元素以及保留旧元素。

我想，当取消选中复选框时，将删除创建的元素。选中时，会添加元素。

// This script checks to see if a tick-box has been ticked
// If so, displays more form options
$(function() {
  $('#contactform :checkbox').click(function() {
  var $this = $(this);
  if ($this.is(':checked')) {

  var newInput = $('<div class="col-lg-12 col-pad7"><div class="form-group"><label class="sr-only" for="name">Name<br></label><input type="text" name="name" id="name" value="" class="form-control newInput required" placeholder="Name" data-name="Name"></div></div>');

  $('input#checkbox').after(newInput);

  } else {
  newInput.remove();
  }
  });
});

Answer 1

＆＃13;

$('#contactform :checkbox').change(function() {
  var $this = $(this);
  if ($this.is(':checked')) {

    var newInput = $('<div id="addme" class="col-lg-12 col-pad7"><div class="form-group"><label class="sr-only" for="name">Name<br></label><input type="text" name="name" id="name" value="" class="form-control newInput required" placeholder="Name" data-name="Name"></div></div>');

    $('#contactform').append(newInput);

  } else {
    $('#contactform').find('#addme').remove();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='contactform'>

  <input type='checkbox'>
</div>

＆＃13;

使用更改事件
将ID放入您追加的元素。取消选中后，找到ID然后删除。

Answer 2

您必须检查复选框后是否放置div：

   if ($this.is(':checked') && $this.siblings('div').length === 0) {
         // place the div here

   } else {
       $this.next().remove();// or just place this line
   }

添加/删除表单元素取决于是否选中复选框

2 个答案: