如何在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; } }); });

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

如何检索jQuery中的复选框值

HTML复选框可以设置为只读吗？