正确的“全选”复选框与jQuery

Question

http://briancray.com/tests/checkboxes/index.html

实现全选的方法很简单，但并不完美。全部选择和全部取消选择都可以正常工作，但是在选择全部状态时，如果取消选中全部，则选中全部也会被选中。这怎么可以纠正？

然后

“检查所有” 仍在检查。这怎么可以纠正？

Answer 1

_{警告，无耻的自我推销提前。}

我写了一个jQuery的插件，完成这种事情。看一看：http://mjball.github.com/jQuery-CheckAll

要与你链接的页面上的标记使用它：

<form action="#" method="post" id="myform"> 

<fieldset> 
    <div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div> 
</fieldset> 

</form> 

这个就足够了：

$('#checkall').checkAll('#myform input:checkbox:not(#checkall)'); 

演示：http://jsfiddle.net/mattball/npeTz/

CheckAll正常工作与jQuery 1.4.4和1.5.2。我没有时间为jQuery 1.6进行更新。 _对不起。

---

更新的jQuery 1.6兼容性：http://jsfiddle.net/mattball/CVQsp/

---

它仍然有效，即使你不小心选择主与奴一起：http://jsfiddle.net/mattball/BwFvc/

Answer 2

您需要处理的状态变化的孩子复选框。 试试这个：

<script type="text/javascript"> 
$(function() { 
    $('#checkall').click(function() { 
     $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked); 
    }); 
     //THIS IS NEW ADDITION TO YOUR CODE 
    $('input[id^="checkbox"]').click(function(){ 
    if(!this.checked){ 
     $('#checkall').attr("checked", false) 
    } 
    }); 
}); 
</script> 

Answer 3

这是我的承担。

var checkall = $('#checkall'); 
var boxes = $('input[type="checkbox"]').not(checkall); 

checkall.click(function() { 
    boxes.attr('checked', this.checked); 
}); 
boxes.change(function() { 
    checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length; 
}); 

这样checkall得到检查，即使您手动检查所有子框。

http://jsfiddle.net/T4EK2/

Answer 4

好，也有类似的答案了。因为我花了一些时间让它工作和学习新东西，所以我会发布这个。 不适用于v1.6

http：// jsfiddle。净/ gsndd/

http://jsfiddle.net/gsndd/2/

$(function() { 
    // Ripped from https://github.com/mjball/jQuery-CheckAll @Matt Ball 
    var propFn = typeof $.fn.prop === 'function' ? 'prop' : 'attr'; 

    $('#checkall').click(function() { 
     $(this).parents('fieldset:eq(0)').find(':checkbox')[propFn]('checked', this.checked); 
    }); 
    $("input[type=checkbox]:not(#checkall)").click(function() { 
     if (!this.checked) { 
      $("#checkall")[propFn]('checked', this.checked); 
     } else { 
      $("#checkall")[propFn]('checked', !$("input[type=checkbox]:not(#checkall)").filter(':not(:checked)').length); 
     } 

    }); 
}); 

编辑：做出同样的工作，V1.6 +，只是改变 attr到 prop。最终，你最好使用一种适用于两者的东西。

编辑 - 修复了在任何版本上工作的代码（假设John不会推出v1.7并且说'惊喜'）。 感谢@Matt Ball