如何在HTML中实现“全选”复选框?

我有一个有多个复选框的HTML页面。

我需要一个名为“全选”的复选框。 当我选中此复选框时,必须选中HTML页面中的所有复选框。 我该怎么做?

<script language="JavaScript"> function toggle(source) { checkboxes = document.getElementsByName('foo'); for(var checkbox in checkboxes) checkbox.checked = source.checked; } </script> <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/> <input type="checkbox" name="foo" value="bar1"> Bar 1<br/> <input type="checkbox" name="foo" value="bar2"> Bar 2<br/> <input type="checkbox" name="foo" value="bar3"> Bar 3<br/> <input type="checkbox" name="foo" value="bar4"> Bar 4<br/> 

更新:

for each...in构造似乎并没有工作,至少在这种情况下,在Safari 5或Chrome 5中。此代码应该在所有浏览器中工作:

 function toggle(source) { checkboxes = document.getElementsByName('foo'); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; } } 

使用jQuery :

 // Listen for click on toggle checkbox $('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } }); 

HTML:

 <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <input type="checkbox" name="checkbox-2" id="checkbox-2" /> <input type="checkbox" name="checkbox-3" id="checkbox-3" /> <!-- select all boxes --> <input type="checkbox" name="select-all" id="select-all" /> 

要取消选择:

 $('#select_all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } else { $(':checkbox').each(function() { this.checked = false; }); } }); 

我不确定有人没有以这种方式回答(使用jQuery ):

  $( '#container .toggle-button' ).click( function () { $( '#container input[type="checkbox"]' ).prop('checked', this.checked) }) 

它是干净的,没有循环或if / else子句,并作为魅力。

我很惊讶没有人提到document.querySelectorAll() 。 纯JavaScript解决方案,适用于IE9 +。

 function toggle(source) { var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i] != source) checkboxes[i].checked = source.checked; } } 
 <input type="checkbox" onclick="toggle(this);" />Check all?<br /> <input type="checkbox" />Bar 1<br /> <input type="checkbox" />Bar 2<br /> <input type="checkbox" />Bar 3<br /> <input type="checkbox" />Bar 4<br /> 

演示http://jsfiddle.net/H37cb/

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script> <script type="text/javascript"> $(document).ready(function(){ $('input[name="all"],input[name="title"]').bind('click', function(){ var status = $(this).is(':checked'); $('input[type="checkbox"]', $(this).parent('li')).attr('checked', status); }); }); </script> <div id="wrapper"> <li style="margin-top: 20px"> <input type="checkbox" name="all" id="all" /> <label for='all'>All</label> <ul> <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label> <ul> <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li> <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li> <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li> <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li> </ul> </li> </ul> <ul> <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label> <ul> <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li> <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li> <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li> </ul> </li> </ul> </li> </div> 
 <html> <head> <script type="text/javascript"> function do_this(){ var checkboxes = document.getElementsByName('approve[]'); var button = document.getElementById('toggle'); if(button.value == 'select'){ for (var i in checkboxes){ checkboxes[i].checked = 'FALSE'; } button.value = 'deselect' }else{ for (var i in checkboxes){ checkboxes[i].checked = ''; } button.value = 'select'; } } </script> </head> <body> <input type="checkbox" name="approve[]" value="1" /> <input type="checkbox" name="approve[]" value="2" /> <input type="checkbox" name="approve[]" value="3" /> <input type="button" id="toggle" value="select" onClick="do_this()" /> </body> </html> 

当你调用document.getElementsByName("name") ,你会得到一个Object 。 使用.item(index)遍历Object所有项目

HTML:

 <input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked"> <input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​includes/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​misc/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​modules/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​profiles/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​scripts/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​sites/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​stats/​">​ <input type=​"checkbox" name=​"rfile" value=​"/​themes/​">​ 

略微改变了版本,并谨慎地取消和取消

 $('#select-all').click(function(event) { var $that = $(this); $(':checkbox').each(function() { this.checked = $that.is(':checked'); }); }); 

我的简单解决方案允许有选择地选择/取消选中表单中给定部分的所有复选框,同时为每个复选框使用不同的名称 ,以便在表单发布后可以轻松识别它们。

使用Javascript:

 function setAllCheckboxes(divId, sourceCheckbox) { divElement = document.getElementById(divId); inputElements = divElement.getElementsByTagName('input'); for (i = 0; i < inputElements.length; i++) { if (inputElements[i].type != 'checkbox') continue; inputElements[i].checked = sourceCheckbox.checked; } } 

HTML例子:

 <p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p> <div id="actors"> <p><input type="checkbox" name="kevin" />Spacey, Kevin</p> <p><input type="checkbox" name="colin" />Firth, Colin</p> <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p> </div> 

我希望你喜欢它!

JavaScript是你最好的选择。 下面的链接给出了一个使用按钮来取消/选择全部的例子。 您可以尝试使用复选框来调整它,只需使用'选择所有'复选框'onClick属性。

Javascript函数来检查或取消选中所有的复选框

这个页面有一个更简单的例子

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

试试这个简单的jquery:

$('#select-all').click(function(event) { if(this.checked) { $(':checkbox').prop('checked', true); } else { $(':checkbox').prop('checked', false); } });

此示例使用复选框变量名称不同的本地JavaScript,即不是全部“foo”。

 <!DOCTYPE html> <html> <body> <p>Toggling checkboxes</p> <script> function getcheckboxes() { var node_list = document.getElementsByTagName('input'); var checkboxes = []; for (var i = 0; i < node_list.length; i++) { var node = node_list[i]; if (node.getAttribute('type') == 'checkbox') { checkboxes.push(node); } } return checkboxes; } function toggle(source) { checkboxes = getcheckboxes(); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; } } </script> <input type="checkbox" name="foo1" value="bar1"> Bar 1<br/> <input type="checkbox" name="foo2" value="bar2"> Bar 2<br/> <input type="checkbox" name="foo3" value="bar3"> Bar 3<br/> <input type="checkbox" name="foo4" value="bar4"> Bar 4<br/> <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/> </body> </html> 

如果采用jQuery的最佳答案,请记住,传递给点击功能的对象是一个EventHandler,而不是原来的复选框对象。 因此代码应该修改如下。

HTML

 <input type="selectThemAll" /> Toggle All<br/> <input type="checkbox" name="foo" value="bar1"> Bar 1<br/> <input type="checkbox" name="foo" value="bar2"> Bar 2<br/> <input type="checkbox" name="foo" value="bar3"> Bar 3<br/> <input type="checkbox" name="foo" value="bar4"> Bar 4<br/> 

使用Javascript

 jQuery("[name=selectThemAll]").click(function(source) { checkboxes = jQuery("[name=foo]"); for(var i in checkboxes){ checkboxes[i].checked = source.target.checked; } }); 
 <asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" /> <br /> <asp:CheckBoxList ID="CheckBoxList1" runat="server"> <asp:ListItem Value="Item 1">Item 1</asp:ListItem> <asp:ListItem Value="Item 2">Item 2</asp:ListItem> <asp:ListItem Value="Item 3">Item 3</asp:ListItem> <asp:ListItem Value="Item 4">Item 4</asp:ListItem> <asp:ListItem Value="Item 5">Item 5</asp:ListItem> <asp:ListItem Value="Item 6">Item 6</asp:ListItem> </asp:CheckBoxList> <script type="text/javascript"> function checkAll(obj1) { var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input'); for (var i = 0; i < checkboxCollection.length; i++) { if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") { checkboxCollection[i].checked = obj1.checked; } } } </script> 

应该完成这项工作:

  $(':checkbox').each(function() { this.checked = true; }); 
 $(document).ready(function() { $(document).on(' change', 'input[name="check_all"]', function() { $('.cb').prop("checked", this.checked); }); }); 

使用jQuery和淘汰赛:

使用此绑定主复选框与复选框保持同步,除非选中所有复选框,否则它将被取消选中。

 ko.bindingHandlers.allChecked = { init: function (element, valueAccessor) { var selector = valueAccessor(); function getChecked () { element.checked = $(selector).toArray().every(function (checkbox) { return checkbox.checked; }); } function setChecked (value) { $(selector).toArray().forEach(function (checkbox) { if (checkbox.checked !== value) { checkbox.click(); } }); } ko.utils.registerEventHandler(element, 'click', function (event) { setChecked(event.target.checked); }); $(window.document).on('change', selector, getChecked); ko.utils.domNodeDisposal.addDisposeCallback(element, () => { $(window.document).off('change', selector, getChecked); }); getChecked(); } }; 

在html中:

 <input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/> <input id="check-1" type="checkbox" class="checkValue"/> <input id="check-2" type="checkbox" class="checkValue"/> 

这里的形式是:

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

这里的jQuery:

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

这是一个backbone.js实现:

 events: { "click #toggleChecked" : "toggleChecked" }, toggleChecked: function(event) { var checkboxes = document.getElementsByName('options'); for(var i=0; i<checkboxes.length; i++) { checkboxes[i].checked = event.currentTarget.checked; } }, 

HTML

 <input class='all' type='checkbox'> All <input class='item' type='checkbox' value='1'> 1 <input class='item' type='checkbox' value='2'> 2 <input class='item' type='checkbox' value='3'> 3 

JavaScript的

 $(':checkbox.all').change(function(){ $(':checkbox.item').prop('checked', this.checked); }); 

1:添加onchange事件处理程序

 <th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th> 

2:修改代码来处理选中/未选中

  function checkAll(ele) { var checkboxes = document.getElementsByTagName('input'); if (ele.checked) { for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = true; } } } else { for (var i = 0; i < checkboxes.length; i++) { console.log(i) if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } } } 

您可能在同一表单上不同的复选框 。 这是一个解决方案,选择/取消选择复选框的类名称,使用香草JavaScript函数document.getElementsByClassName

全选按钮

 <input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All 

一些复选框可供选择

 <input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' /> <input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' /> 

javascript

  function selectAll() { var blnChecked = document.getElementById("select_all_invoices").checked; var check_invoices = document.getElementsByClassName("check_invoice"); var intLength = check_invoices.length; for(var i = 0; i < intLength; i++) { var check_invoice = check_invoices[i]; check_invoice.checked = blnChecked; } } 

你可以使用这个简单的代码

 $('.checkall').click(function(){ var checked = $(this).prop('checked'); $('.checkme').prop('checked', checked); }); 

简单和点:

jQuery – 单击按钮或div或标签元素。 检查页面上的所有复选框。 请记住,你必须调整:复选框,使其更具体。

 jQuery("#My-Button").click(function() { jQuery(':checkbox').each(function() { if(this.checked == true) { this.checked = false; } else { this.checked = true; } }); });