所以,如果我点击全部检查,他们都会被检查。我要做的是,如果您取消选中其中一个,则“全部”复选框将取消选中,如果您选中所有列表,则“全部”将被选中。
我错过了与dom互动的方式。请帮忙!
HTML代码
<input id="select_all" class="allCategories" name="Category code" type="checkbox" value="All" /> All
<p class="h4">Benefits to the community and other categories</p>
<div class="checkbox"><label for="53"><input id="53" class="all" name="Category code: benefits" type="checkbox" value="53" /> Community - charitable corporations (53)</label><br />
<label for="55"><input id="55" class="all" name="Category code: benefits" type="checkbox" value="55" /> Community - charitable trusts (Other than service clubs and fraternal societies projects) (55)</label><br />
<label for="59"><input id="59" class="all" name="Category code: benefits" type="checkbox" value="59" /> Community organizations - not elsewhere classified (59)</label><br />
<label for="83"><input id="83" class="all" name="Category code: benefits" type="checkbox" value="83" /> Corporation funding registered Canadian amateur athletic associations (83)</label><br />
<label for="75"><input id="75" class="all" name="Category code: benefits" type="checkbox" value="75" /> Employees' charity trusts (75)</label><br />
<label for="50"><input id="50" class="all" name="Category code: benefits" type="checkbox" value="50" /> Libraries, museums and other repositories (50)</label><br />
<label for="51"><input id="51" class="all" name="Category code: benefits" type="checkbox" value="51" /> Military units (51)</label><br />
<label for="99"><input id="99" class="all" name="Category code: benefits" type="checkbox" value="99" /> Miscellaneous charitable organizations - not elsewhere classified (99)</label> <label for="52"> <input id="52" class="all" name="Category code: benefits" type="checkbox" value="52" /> Preservation of sites, beauty and historical (52)</label><br />
</div>
Jquery代码
$(document).ready(function(){
//select all checkboxes
$("#select_all").change(function(){ //"select all" change
$(".all").prop('checked', $(this).prop("checked")); //change all ".all" checked status
});
//".all" change
$('input:checkbox.all').change(function(){
//uncheck "select all", if one of the listed checkbox item is unchecked
if(false == $(this).prop("checked")){ //if this item is unchecked
$("#select_all").prop('checked', false); //change "select all" checked status to false
}
//check "select all" if all checkbox items are checked
if ($('.all:checked').length == $('.all').length ){
$("#select_all").prop('checked', true);
}
});
});