选择所有选中的复选框
问题描述:
我使用通过使用此代码选择页面中所有的复选框:选择所有选中的复选框
$(function(){
// add multiple select/deselect functionality
$("#selectall").click(function() {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
在这段代码中选择所有checkedbox。但是,如果我们选择一些复选框,并选择所有选择全部。在我们再次取消选中之后,除了上一个复选框之外,其余的都保持选中。
答
的$('.case').attr('checked', this.checked);
的attr
部分是不正确:复选框的当前选中的状态由checked
属性表示。 checked
属性只是the default checked state为input
,而不是其当前的检查状态。 (就像value
属性和value
属性之间的差异)
要设置复选框的当前状态,使用prop
:
$(function() {
// add multiple select/deselect functionality
$("#selectall").click(function() {
$('.case').prop('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
$("#selectall").prop("checked", $(".case").length == $(".case:checked").length);
});
});
<div><label><input type="checkbox" class="case"> One</label></div>
<div><label><input type="checkbox" class="case"> Two</label></div>
<div><label><input type="checkbox" class="case"> Three</label></div>
<div><label><input type="checkbox" class="case"> Four</label></div>
<div><label><input id="selectall" type="checkbox"> ALL</label></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
而不是'$(“# ('checked',false);'try'$(“#selectall”)。attr(“checked”,false);' –
$(“#selectall”)。 – Coder
不是'attr',伙计们; 'prop'。 –