根据复选框是否被选中来添加/删除表单元素

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

$('#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(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id='contactform'> 
 

 
    <input type='checkbox'> 
 
</div>

1. 使用更改事件
2. 把一个ID给你附加的元素。取消选中找到ID然后删除。

Answer 2

你必须检查，如果一个div放在复选框后：（”的NewClass'）

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

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