我试图使用jquery检查/取消选中所有复选框 . 现在通过选中/取消选中父复选框,所有子复选框都被选中/取消选中,父复选框的文本也变为checkall / uncheckall .
现在我想用输入按钮替换父复选框,并更改按钮上的文本以checkall / uncheckall . 这个代码,任何人都可以调整代码....
$( function() {
$( '.checkAll' ).live( 'change', function() {
$( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
$( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
});
$( '.cb-element' ).live( 'change', function() {
$( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );
});
});
<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
23 回答
试试这个:
DEMO
这是我发现的最短路径(需要jQuery1.6)
HTML:
JS:
我正在使用.prop,因为.attr不适用于jQuery 1.6中的复选框,除非你明确地向输入标签添加了checked属性 .
例-
试试这个:
HTML
JavaScript
DEMO
HTML
使用Javascript
试试这个:
e
是您执行click
时生成的事件,并且e.target
是单击的元素(.checkAll
),因此您只需要将属性checked
属性类.cb-element
与类别为.checkAll`的元素放在一起 .PS:请原谅我糟糕的英语!
使用按钮切换复选框的解决方案,与jQuery 1.9兼容,其中toogle-event is no longer available:
DEMO
Best Solution here Check Fiddle
同意Richard Garside的简短回答,但不是在
$(this).prop("checked")
中使用prop()
,而是可以使用checkbox的原生JSchecked
属性,试试这个
无耻的自我推销:there's a jQuery plugin for that .
HTML:
JS:
......你已经完成了 .
http://jsfiddle.net/mattball/NrM2P
试试这个,
您可以使用
this.checked
来验证复选框的当前状态,尝试以下代码来检查/取消选中所有复选框
试试这个Demo Link
还有另一种简短的方法,例如以下结帐 . 在此示例中,选中是否选中所有复选框,如果选中则复选,则检查所有复选框,如果不是全部将取消选中
如果用户选中所有复选框,则下面的代码将起作用,然后选中所有复选框,如果用户取消选中任何一个复选框,则选中所有复选框将取消选中 .
你可以试试这个
类
.checkAll
是一个控制批量操作的复选框我知道这个问题已经过时但我注意到大多数人都在使用复选框 . 接受的答案使用按钮,但无法使用多个按钮(例如,底部第一页顶部的一个按钮) . 所以这是两个都做的修改 .
HTML
jQuery的
这将允许您在更改文本和复选框值时拥有任意数量的按钮 . 我包含了一个
e.preventDefault()
调用,因为这会阻止页面因href="#"
部分跳到顶部 .这是一个链接,用于选中和取消选中父复选框,所有子复选框都被选中和取消选中 .
jquery check uncheck all checkboxes Using Jquery With Demo
将其添加到您的代码块中,甚至单击您的按钮
Check / Uncheck All with Intermediate property using jQuery
使用 getSelectedItems() 方法获取Array中的Checked Items
Source Checkbox List Select / Unselect All with Indeterminate Master Check
HTML
jQuery
如果未检查所有项目,请选中全部取消选中/检查控制器
JS:
HTML: