Jquerycheckbox全选
我不是jQuery的专家，但我已经尝试为我的应用程序创build一个小脚本。 我想检查所有的checkbox，但它不能正常工作。
首先我尝试使用attr ，之后我尝试了prop但是我做错了什么。
我先试了一下：
$("#checkAll").change(function(){ if (! $('input:checkbox').is('checked')) { $('input:checkbox').attr('checked','checked'); } else { $('input:checkbox').removeAttr('checked'); } });
但是这不起作用。
下一步：这比上面的代码更好
$("#checkAll").change(function(){ if (! $('input:checkbox').is('checked')) { $('input:checkbox').prop('checked',true); } else { $('input:checkbox').prop('checked', false); } });
这两个例子都不起作用。 我试图用Googlesearch一个答案，但没有成功。
jsFiddle： http : //jsfiddle.net/hhZfu/4/
谢谢
您需要使用.prop（）来设置选中的属性
$("#checkAll").click(function(){ $('input:checkbox').not(this).prop('checked', this.checked); });
演示： 小提琴
只需使用checkAll的checked属性，并使用prop（）而不是attr来检查属性
现场演示
$('#checkAll').click(function () { $('input:checkbox').prop('checked', this.checked); });
使用prop（）而不是attr（）来检查属性
从jQuery 1.6开始，.attr（）方法对于尚未设置的属性返回undefined。 要检索和更改DOM属性（如选中，选中或禁用表单元素的状态），请使用.prop（）方法
你有相同的checkbox的ID，它应该是唯一的 。 你最好使用依赖checkbox的一些类，以便它不包括你不想要的checkbox 。 由于$('input:checkbox')将选中页面上的所有checkbox。 如果您的页面使用新的checkbox进行扩展，那么它们也将被选中/取消选中。 这可能不是预期的行为。
现场演示
$('#checkAll').click(function () { $(':checkbox.checkItem').prop('checked', this.checked); });
完整的解决scheme在这里。
$(document).ready(function() { $("#checkedAll").change(function() { if (this.checked) { $(".checkSingle").each(function() { this.checked=true; }); } else { $(".checkSingle").each(function() { this.checked=false; }); } }); $(".checkSingle").click(function () { if ($(this).is(":checked")) { var isAllChecked = 0; $(".checkSingle").each(function() { if (!this.checked) isAllChecked = 1; }); if (isAllChecked == 0) { $("#checkedAll").prop("checked", true); } } else { $("#checkedAll").prop("checked", false); } }); });
Html应该是：
选中checkbox上的checkbox将被选中并取消选中。
<input type="checkbox" name="checkedAll" id="checkedAll" /> <input type="checkbox" name="checkAll" class="checkSingle" /> <input type="checkbox" name="checkAll" class="checkSingle" /> <input type="checkbox" name="checkAll" class="checkSingle" />
希望这有助于像我这样做的人。
最简单的方法我知道：
$('input[type="checkbox"]').prop("checked", true);
你为什么不尝试这个（在第二行'表单＃'你需要把你的HTML表单的正确select器]：
$('.checkAll').click(function(){ $('form#myForm input:checkbox').each(function(){ $(this).prop('checked',true); }) }); $('.uncheckAll').click(function(){ $('form#myForm input:checkbox').each(function(){ $(this).prop('checked',false); }) });
你的html应该是这样的：
<form id="myForm"> <span class="checkAll">checkAll</span> <span class="uncheckAll">uncheckAll</span> <input type="checkbox" class="checkSingle"></input> .... </form>
我希望有帮助。
使用.prop（）来获取属性的值
$("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); });
HTML：
<p><input type="checkbox" id="parent" /> Check/Uncheck All</p> <ul> <li> <input type="checkbox" class="child" /> Checkbox 1</li> <li> <input type="checkbox" class="child" /> Checkbox 2</li> <li> <input type="checkbox" class="child" /> Checkbox 3</li> </ul>
jQuery的：
$(document).ready(function() { $("#parent").click(function() { $(".child").prop("checked", this.checked); }); $('.child').click(function() { if ($('.child:checked').length == $('.child').length) { $('#parent').prop('checked', true); } else { $('#parent').prop('checked', false); } }); });
演示： FIDDLE
你可以使用下面的简单代码：
function checkDelBoxes(pForm, boxName, parent) { for (i = 0; i < pForm.elements.length; i++) if (pForm.elements[i].name == boxName) pForm.elements[i].checked = parent; }
使用示例：
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All </a> <a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All </a>
if(isAllChecked == 0) { $("#select_all").prop("checked", true); }
请将上面的行更改为
if(isAllChecked == 0) { $("#checkedAll").prop("checked", true); }
在SSR的答案和它的工作完美谢谢
触发点击
$("#checkAll").click(function(){ $('input:checkbox').click(); });
要么
$("#checkAll").click(function(){ $('input:checkbox').trigger('click'); });
要么
$("#checkAll").click(function(){ $('input:checkbox').prop('checked', this.checked); });
if($('#chk_all').is(":checked")) { $('#'+id).attr('checked', true); } else { $('#'+id).attr('checked', false); }
$('#checkall').on("click",function(){ $('.chk').trigger("click"); });
html：
<div class="col-md-3 general-sidebar" id="CategoryGrid"> <h5>Category & Sub Category <span style="color: red;">* </span></h5> <div class="checkbox"> <label> <input onclick="checkUncheckAll(this)" type="checkbox"> All </label> </div> <div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div> <div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>
JavaScript的：
function checkUncheckAll(ele) { if (ele.checked) { $('.cat').prop('checked', ele.checked); $('.subcat').prop('checked', ele.checked); } else { $('.cat').prop('checked', ele.checked); $('.subcat').prop('checked', ele.checked); } }
通常，如果至less有一个从属checkbox未选中，您也希望取消选中主checkbox，如果选中了所有从属checkbox，则checkbox将被取消选中：
/** * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes * @param masterId is the id of master checkbox * @param slaveName is the name of slave checkboxes */ function checkAll(masterId, slaveName) { $master = $('#' + masterId); $slave = $('input:checkbox[name=' + slaveName + ']'); $master.click(function(){ $slave.prop('checked', $(this).prop('checked')); $slave.trigger('change'); }); $slave.change(function() { if ($master.is(':checked') && $slave.not(':checked').length > 0) { $master.prop('checked', false); } else if ($master.not(':checked') && $slave.not(':checked').length == 0) { $master.prop('checked', 'checked'); } }); }
如果您想启用任何控件（例如“ Remove Allbutton或“ Add Somethingbutton），则至less选中一个checkbox并在未选中checkbox时禁用：
/** * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes, * enables or disables a control when a checkbox is checked * @param masterId is the id of master checkbox * @param slaveName is the name of slave checkboxes */ function checkAllAndSwitchControl(masterId, slaveName, controlId) { $master = $('#' + masterId); $slave = $('input:checkbox[name=' + slaveName + ']'); $master.click(function(){ $slave.prop('checked', $(this).prop('checked')); $slave.trigger('change'); }); $slave.change(function() { switchControl(controlId, $slave.filter(':checked').length > 0); if ($master.is(':checked') && $slave.not(':checked').length > 0) { $master.prop('checked', false); } else if ($master.not(':checked') && $slave.not(':checked').length == 0) { $master.prop('checked', 'checked'); } }); } /** * Enables or disables a control * @param controlId is the control-id * @param enable is true, if control must be enabled, or false if not */ function switchControl(controlId, enable) { var $control = $('#' + controlId); if (enable) { $control.removeProp('disabled'); } else { $control.prop('disabled', 'disabled'); } }
HTML
<HTML> <HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE> </HEAD> <BODY> <H2>Multiple Checkbox Select/Deselect - DEMO</H2> <table border="1"> <tr> <th><input type="checkbox" id="selectall"/></th> <th>Cell phone</th> <th>Rating</th> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> <td>BlackBerry Bold 9650</td> <td>2/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> <td>Samsung Galaxy</td> <td>3.5/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td> <td>Droid X</td> <td>4.5/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td> <td>HTC Desire</td> <td>3/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td> <td>Apple iPhone 4</td> <td>5/5</td> </tr> </table> </BODY> </HTML>
jQuery代码
<SCRIPT language="javascript"> $(function(){ // add multiple select / deselect functionality $("#selectall").click(function () { $('.case').attr('checked', this.checked); }); // if all checkbox are selected, check the selectall checkbox // and viceversa $(".case").click(function(){ if($(".case").length == $(".case:checked").length) { $("#selectall").attr("checked", "checked"); } else { $("#selectall").removeAttr("checked"); } }); }); </SCRIPT>
观看演示
点击这里查看演示
<pre> <SCRIPT language="javascript"> $(function(){ // add multiple select / deselect functionality $("#selectall").click(function () { $('.case').attr('checked', this.checked); }); // if all checkbox are selected, check the selectall checkbox // and viceversa $(".case").click(function(){ if($(".case").length == $(".case:checked").length) { $("#selectall").attr("checked", "checked"); } else { $("#selectall").removeAttr("checked"); } }); }); </SCRIPT> <HTML> <HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE> </HEAD> <BODY> <H2>Multiple Checkbox Select/Deselect - DEMO</H2> <table border="1"> <tr> <th><input type="checkbox" id="selectall"/></th> <th>Cell phone</th> <th>Rating</th> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> <td>BlackBerry Bold 9650</td> <td>2/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> <td>Samsung Galaxy</td> <td>3.5/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td> <td>Droid X</td> <td>4.5/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td> <td>HTC Desire</td> <td>3/5</td> </tr> <tr> <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td> <td>Apple iPhone 4</td> <td>5/5</td> </tr> </table> </BODY> </HTML> </pre>
我知道有很多答案张贴在这里，但我想发布这个代码优化，我们可以在全球范围内使用它。
我已经尽力了
/*---------------------------------------- * Check and uncheck checkbox which will global * Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes * Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }} ----------------------------------------*/ function checkUncheckAll(chk_all_cls,chiled_patter_key){ if($("."+chk_all_cls).prop('checked') == true){ $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked'); }else{ $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked'); } } if($(".check_all").get(0)){ var chiled_patter_key = $(".check_all").attr('dependant-prefix-id'); $(".check_all").on('change',function(){ checkUncheckAll('check_all',chiled_patter_key); }); /*------------------------------------------------------ * this will remain checkbox checked if already checked before ajax call! :) ------------------------------------------------------*/ $(document).ajaxComplete(function() { checkUncheckAll('check_all',chiled_patter_key); }); }
我希望这会有所帮助！
一个checkbox来统治他们
对于仍然在寻找插件来控制checkbox的人来说，通过轻量级的方式来控制checkbox，对UniformJS和iCheck提供开箱即用的支持，并且当至less有一个受控checkbox未被选中时会被取消选中（当所有控制checkbox被选中当然）我创build了一个jQuery checkAll插件 。
随意检查文档页面上的例子。
对于这个问题的例子，你需要做的是：
$( "#checkAll" ).checkall({ target: "input:checkbox" });
这不是那么清楚和简单吗？
<p id="checkAll">Check All</p> <hr /> <input type="checkbox" class="checkItem">Item 1 <input type="checkbox" class="checkItem">Item 2 <input type="checkbox" class="checkItem">Item3
和jQuery
$(document).on('click','#checkAll',function () { $('.checkItem').not(this).prop('checked', this.checked); });
function chek_al_indi(id) { var k = id; var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val()); var std_cnt = 10; if ($('#'+ k).is(":checked")) { for (var i = 1; i <= std_cnt; i++) { $("#chk"+ k).attr('checked',true); k = k + cnt_descriptiv_indictr; } } if ($('#'+ k).is(":not(:checked)")) { for (var i = 1; i <= std_cnt; i++) { $("#chk"+ k).attr('checked',false); k = k + cnt_descriptiv_indictr; } } }
即使返回多个结果，也可以直接对jQuery Selector的结果运行.prop() 。 所以：
$("input[type='checkbox']").prop('checked', true)
我想你需要使用.prop（）作为checkbox选中的属性
$(document).on("click", "#check_All", function(){ $('input:checkbox').not(this).prop('checked', this.checked); });
我希望这个答案对你有用。
