更正“全选" jQuery复选框 [英] Correct "select all" checkbox with jQuery

问题描述

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

实现全选的方法很简单，但并不完美.全选和取消全选工作正常，但是在全选状态下，如果您取消选中一项，则也会选中全选.该如何纠正?

The ways to implement select all is simple, but not perfect. The select all and unselect all works fine, but when under select all state, if you uncheck one the select all is also checked. How can this be corrected?

然后

仍选中全部检查".该如何纠正?

"Check all" is still checked. How can this be corrected?

推荐答案

_{警告，前方要进行无耻的自我推广.}

我已经为jQuery编写了一个插件，可以完成这种事情.看看: http://mjball.github.com/jQuery-CheckAll

I've written a plugin for jQuery that does exactly this sort of thing. Have a look: http://mjball.github.com/jQuery-CheckAll

要将其与您链接的页面上的标记一起使用:

To use it with the markup on the page you linked:

<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/

Updated for jQuery 1.6 compatibility: http://jsfiddle.net/mattball/CVQsp/

即使您不小心选择了主服务器和从服务器，它仍然可以工作: http://jsfiddle.net/mattball/BwFvc/

It still works even if you accidentally select the master along with the slaves: http://jsfiddle.net/mattball/BwFvc/

这篇关于更正“全选" jQuery复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！