根據複選框是否被選中來添加/刪除表單元素

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 
    }