我的 html 页面中有许多CheckBox元素。我想要的是每当检查其中任何一个时，动态地将一个添加input type='checkbox'到 html 页面。如果未选中，则删除添加的元素。不应重复任何元素。
<html><head>
<title>Welcome ! eDetailing :: Admin</title>
</head>
<body id="bdload">
<form name="frm" method="post">
<input type="hidden" name="deleteId" id="deleteId" value="3">
<input type="hidden" name="nextId" id="nextId" value="1-0">
<input type="hidden" name="prvId" id="prvId" value="4-0">
<!----------------------------------------------media Information ------------------------------------------------------>
<div id="faqtable1" class="icongroup2">
<div class="clBlock">
<!--*****************************************************************************-->
<div class="clRow">
<div class="clLeft">
<span id="docFname" class="col1">
<label class="clsvlabel" for="selMediaTitle">Media Title : </label>
</span>
<span class="col2 clWrite">
<label class="labelshow" style="display: none; ">media 2</label>
<select name="selMediaTitlen" class="clsvtext clvselectempty" id="selMediaTitle" style="display: inline-block; ">
<option value="">Media Title</option>
<option value="42">Energy</option>
<option value="43" selected="selected">media 2</option>
<option value="44">media 3</option>
<option value="45">media 4</option>
<option value="46">mediapicture</option>
<option value="47">mediavid</option>
<option value="48">mediapdf</option>
</select>
</span>
</div>
</div>
<div class="clRow">
<div class="clRight1">
<span id="docLname" class="col1">
<label class="clsvlabel" for="txtmrname"></label>
</span>
<span class="col2 clWrite2">
<div class="clcheckboxlist1">
<div class="clckbxheader">
<input type="checkbox" class="clckbxheadlist1 clsvtextempty" id="ckidh1" style="">
<label for="ckidh1" id="chk1">Check All Doctor</label>
<label for="ckidh1" id="unchk1" style="display:none;">UnCheck All Doctors</label>
</div>
sdsd
<div class="clckbxbody1" id="cklist1">
<span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" checked="checked" id="28" name="checkMr[]" value="28" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Zaheerdfsfghg Sdf</label>
</span><div name="mydiv><input type=" checkbox'class="txtshow clsvtextempty" id="28" value="28" class="checkmrdone"></div><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="6" name="checkMr[]" value="6" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Prizall Anuj Bagrecha</label>
</span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="7" name="checkMr[]" value="7" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Javedq Rashid Ansari</label>
</span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="2" name="checkMr[]" value="2" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Vijay Kumar Asthana</label>
</span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="34" name="checkMr[]" value="34" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Manish Malviya</label>
</span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="1" name="checkMr[]" value="1" style=""><label for="ckid1"><em style="background-color:#9ACD32;" class="emdoclist">Core Bi</em>Sujoy Kumar Kale</label>
</span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="4" name="checkMr[]" value="4" style=""><label for="ckid1"><em style="background-color:#9ACD32;" class="emdoclist">Core Bi</em>Avkaash K Tare</label>
</span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="5" name="checkMr[]" value="5" style=""><label for="ckid1"><em style="background-color:#800000;" class="emdoclist">Core Ci</em>Viabhav Shishir Parkhe</label>
</span> </div>
</div>
</span>
</div>
</div>
<!--*****************************************************************************-->
<div class="clRow">
<div class="clLeft">
<span id="docFname" class="col1">
<label class="clsvlabel" for="chk_active">Active :</label>
</span>
<span class="col2 clWrite">
<label class="labelshow" style="display: none; ">
YES
</label>
<input type="checkbox" name="chk_active" id="chk_active" value="0" style="width: auto; display: inline-block; " class="clsvtext clvselectempty clsvtextempty" checked="checked">
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$j("#btnadvsearch").bind("click", function() {
$j.ajax({
type:"POST",
url:"advanceSearch.php",
data: { name : $j("#advMedia").val(),type : $j("#advType").val(),activ : $j("#selActive").val(),},
success:function(response){
$j("#showResult").html(response);
}
});
});
</script>
<div class="Zebra_DatePicker"><table class="dp_header"><tbody><tr><td class="dp_previous">«</td><td class="dp_caption"> </td><td class="dp_next">»</td></tr></tbody></table><table class="dp_daypicker"></table><table class="dp_monthpicker"></table><table class="dp_yearpicker"></table></div><div class="Zebra_DatePicker"><table class="dp_header"><tbody><tr><td class="dp_previous">«</td><td class="dp_caption"> </td><td class="dp_next">»</td></tr></tbody></table><table class="dp_daypicker"></table><table class="dp_monthpicker"></table><table class="dp_yearpicker"></table></div></body><span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span><object id="skype_plugin_object" location.href="http://localhost/konnect/mediaAssgin/" location.hostname="localhost" style="position: absolute; visibility: hidden; left: -100px; top: -100px; " width="0" height="0" type="application/x-vnd.skype.click2call.chrome.5.7.0"></object></html>