如何使用jQuery使用按钮来选中/取消选中所有复选框? [英] How do I check/uncheck all checkboxes with a button using jQuery?
本文介绍了如何使用jQuery使用按钮来选中/取消选中所有复选框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用jQuery选中/取消选中所有复选框。现在,通过选中/取消选中父复选框,所有子复选框也将被选中/取消选中,父复选框的文本也将变为checkall / uncheckall。
I am trying to check/uncheck all checkboxes using jQuery. Now by checking/unchecking the parent checkbox all the child checkboxes are getting selected/deselected also with the text of parent checkbox getting changed to checkall/uncheckall.
现在,我想用输入按钮替换父复选框,然后将按钮上的文本也更改为checkall / uncheckall。这是代码,任何人都可以调整代码吗?
Now I want to replace parent checkbox with an input button, and change the text also on the button to checkall/uncheckall. THere is the code, can anyone please tweak the code ?
$( 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
推荐答案
尝试以下一项:
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all');
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
这篇关于如何使用jQuery使用按钮来选中/取消选中所有复选框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文