jQuery的检查取消选中一个button的所有checkbox

我想检查/取消选中所有使用jQuery的checkbox。 现在，通过选中/取消选中父checkbox，所有的子checkbox也将被选中/取消选中，父checkbox的文本被更改为checkall / uncheckall。

现在我想用inputbuttonreplace父checkbox，并更改button上的文本以检查/取消选中。 这个代码，任何人都可以请调整代码….

$( 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 

Answer 1

试试这个：

 $(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'); }) }) 

DEMO

Answer 2

这是我find的最短的方式（需要jQuery1.6 +）

HTML：

 <input type="checkbox" id="checkAll"/> 

JS：

 $("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); }); 

我使用.prop作为.attr不适用于jQuery 1.6 +的checkbox，除非你明确地添加一个checked属性到你的input标签。

例-

 $("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="#"> <p><label><input type="checkbox" id="checkAll"/> Check all</label></p> <fieldset> <legend>Loads of checkboxes</legend> <p><label><input type="checkbox" /> Option 1</label></p> <p><label><input type="checkbox" /> Option 2</label></p> <p><label><input type="checkbox" /> Option 3</label></p> <p><label><input type="checkbox" /> Option 4</label></p> </fieldset> </form> 

Answer 3

试试这个：

HTML

 <input type="checkbox" name="all" id="checkall" /> 

JavaScript的

 $('#checkall:checkbox').change(function () { if($(this).attr("checked")) $('input:checkbox').attr('checked','checked'); else $('input:checkbox').removeAttr('checked'); });​ 

DEMO

Answer 4

HTML

 <input type="checkbox" name="select_all" id="select_all" class="checkAll" /> 

使用Javascript

  $('.checkAll').click(function(){ if($(this).attr('checked')){ $('input:checkbox').attr('checked',true); } else{ $('input:checkbox').attr('checked',false); } }); 

Answer 5

使用button切换checkbox的解决scheme，与jQuery 1.9+兼容，其中toogle-event不再可用 ：

 $('.check:button').click(function(){ var checked = !$(this).data('checked'); $('input:checkbox').prop('checked', checked); $(this).val(checked ? 'uncheck all' : 'check all' ) $(this).data('checked', checked); }); 

DEMO

Answer 6

尝试这个：

$('.checkAll').on('click', function(e) { $('.cb-element').prop('checked', $(e.target).prop('checked')); });

'e'是你点击''时产生的事件，'e.target'是被点击的元素（'.checkAll'），所以你只需要把元素的属性'checked'join类'.cb-元素“，类似于”.checkAll“类的元素。

PS：请原谅我的英文不好！

Answer 7

这里最好的解决scheme 检查小提琴

 $("#checkAll").change(function () { $("input:checkbox.cb-element").prop('checked', $(this).prop("checked")); }); $(".cb-element").change(function () { _tot = $(".cb-element").length _tot_checked = $(".cb-element:checked").length; if(_tot != _tot_checked){ $("#checkAll").prop('checked',false); } }); 

 <input type="checkbox" id="checkAll"/> ALL <br /> <input type="checkbox" class="cb-element" /> Checkbox 1 <input type="checkbox" class="cb-element" /> Checkbox 2 <input type="checkbox" class="cb-element" /> Checkbox 3 

Answer 8

尝试这个

 $(".checkAll").click(function() { if("checkall" === $(this).val()) { $(".cb-element").attr('checked', true); $(this).val("uncheckall"); //change button text } else if("uncheckall" === $(this).val()) { $(".cb-element").attr('checked', false); $(this).val("checkall"); //change button text } }); 

Answer 9

无耻的自我推销： 有一个jQuery插件 。

HTML：

 <form action="#" id="myform"> <div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div> <fieldset id="slaves"> <div><label><input type="checkbox"> Checkbox</label></div> <div><label><input type="checkbox"> Checkbox</label></div> <div><label><input type="checkbox"> Checkbox</label></div> <div><label><input type="checkbox"> Checkbox</label></div> <div><label><input type="checkbox"> Checkbox</label></div> </fieldset> </form>​ 

JS：

 $('#checkall').checkAll('#slaves input:checkbox', { reportTo: function () { var prefix = this.prop('checked') ? 'un' : ''; this.next().text(prefix + 'check all'); } });​ 

…你完成了。

http://jsfiddle.net/mattball/NrM2P

Answer 10

尝试这个，

 <input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)"> 

Answer 11

你可以使用this.checked来validationcheckbox的当前状态，

 $('.checkAll').change(function(){ var state = this.checked; //checked ? - true else false state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false); //change text state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All') }); 

 $('.checkAll').change(function(){ var state = this.checked; state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false); state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 

Answer 12

我知道这个问题是旧的，但我注意到大多数人使用checkbox。 接受的答案使用一个button，但不能使用多个button（例如底部的页面顶部的一个button）。 所以这里是两个修改。

HTML

 <a href="#" class="check-box-machine my-button-style">Check All</a> 

jQuery的

 var ischecked = false; $(".check-box-machine").click(function(e) { e.preventDefault(); if (ischecked == false) { $("input:checkbox").attr("checked","checked"); $(".check-box-machine").html("Uncheck All"); ischecked = true; } else { $("input:checkbox").removeAttr("checked"); $(".check-box-machine").html("Check All"); ischecked = false; } }); 

这将允许你有更多的button，你想要改变文本和checkbox的值。 我包含一个e.preventDefault()调用，因为这将会阻止页面跳转到顶部，因为href="#"部分。

Answer 13

 $(function () { $('input#check_all').change(function () { $("input[name='input_ids[]']").prop('checked', $(this).prop("checked")); }); }); 

Answer 14

这是一个链接，用来检查和取消选中父checkbox，所有的子checkbox都被选中和取消选中。

jQuery的选中取消选中所有checkbox使用jQuery 与演示

 $(function () { $("#select-all").on("click", function () { var all = $(this); $('input:checkbox').each(function () { $(this).prop("checked", all.prop("checked")); }); }); }); 

Answer 15

 <script type="text/javascript"> function myFunction(checked,total_boxes){ for ( i=0 ; i < total_boxes ; i++ ){ if (checked){ document.forms[0].checkBox[i].checked=true; }else{ document.forms[0].checkBox[i].checked=false; } } } </script> <body> <FORM> <input type="checkbox" name="checkBox" >one<br> <input type="checkbox" name="checkBox" >two<br> <input type="checkbox" name="checkBox" >three<br> <input type="checkbox" name="checkBox" >four<br> <input type="checkbox" name="checkBox" >five<br> <input type="checkbox" name="checkBox" >six<br> <input type="checkbox" name="checkBox" >seven<br> <input type="checkbox" name="checkBox" >eight<br> <input type="checkbox" name="checkBox" >nine<br> <input type="checkbox" name="checkBox" >ten<br> s <input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)"> <input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)"> </FORM> </body> 

Answer 16

在你的代码块添加这个，甚至点击你的button

 $('input:checkbox').attr('checked',false); 

Answer 17

尝试下面的代码来检查/取消选中所有checkbox

 jQuery(document).ready(function() { $("#check_uncheck").change(function() { if ($("#check_uncheck:checked").length) { $(".checkboxes input:checkbox").prop("checked", true); } else { $(".checkboxes input:checkbox").prop("checked", false); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All <br/> <br/> <div class="checkboxes"> <input type="checkbox" name="check" id="check" /> Check Box 1 <br/> <input type="checkbox" name="check" id="check" /> Check Box 2 <br/> <input type="checkbox" name="check" id="check" /> Check Box 3 <br/> <input type="checkbox" name="check" id="check" /> Check Box 4 </div> 

Answer 18

 $(document).ready( function() { // Check All $('.checkall').click(function () { $(":checkbox").attr("checked", true); }); // Uncheck All $('.uncheckall').click(function () { $(":checkbox").attr("checked", false); }); }); 

Answer 19

选中全部，取消选中/检查控制器是否所有项目都被检查

JS：

e =checkboxID T =checkbox（项目）类N =checkbox检查所有的类

 function checkAll(e,t,n){jQuery("#"+e).click(function(e){if(this.checked){jQuery("."+t).each(function(){this.checked=true;jQuery("."+n).each(function(){this.checked=true})})}else{jQuery("."+t).each(function(){this.checked=false;jQuery("."+n).each(function(){this.checked=false})})}});jQuery("."+t).click(function(e){var r=jQuery("."+t).length;var i=0;var s=0;jQuery("."+t).each(function(){if(this.checked==true){i++}if(this.checked==false){s++}});if(r==i){jQuery("."+n).each(function(){this.checked=true})}if(i<r){jQuery("."+n).each(function(){this.checked=false})}})} 

HTML：

检查所有控制类：chkall_ctrl

 <input type="checkbox"name="chkall" id="chkall_up" class="chkall_ctrl"/> <br/> 1.<input type="checkbox" value="1" class="chkall" name="chk[]" id="chk1"/><br/> 2.<input type="checkbox" value="2" class="chkall" name="chk[]" id="chk2"/><br/> 3.<input type="checkbox" value="3" class="chkall" name="chk[]" id="chk3"/><br/> <br/> <input type="checkbox"name="chkall" id="chkall_down" class="chkall_ctrl"/> <script> jQuery(document).ready(function($) { checkAll('chkall_up','chkall','chkall_ctrl'); checkAll('chkall_down','chkall','chkall_ctrl'); }); </script>