如何在HTML中實現「全選」複選框？

Question

我有一個HTML頁面與多個複選框。

我需要一個名爲「全選」的複選框。當我選擇此複選框時，必須選擇HTML頁面中的所有複選框。我怎樣才能做到這一點？

Answer 1

JavaScript是你最好的選擇。下面的鏈接給出了一個使用按鈕來取消/選擇全部的例子。你可以嘗試調整它來使用複選框，只需使用'選擇所有'複選框'onClick屬性。

Javascript Function to Check or Uncheck all Checkboxes

這個頁面有一個簡單的例子

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

Answer 2

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

UPDATE：

的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; 
    } 
} 

Answer 3

使用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" /> 

Answer 4

如果採用jQuery的最多的回答，請記住，傳遞給點擊功能的對象是一個事件處理程序，不是原始的複選框對象。因此代碼應該修改如下。

的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; 
    } 
}); 

Answer 5

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

Answer 6

爲了使它取消：

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

Answer 7

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

Answer 8

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

Answer 9

應該做的工作做好：

$(':checkbox').each(function() { 
     this.checked = true;       
    }); 

Answer 10

我不知道任何人不能以這種方式回答（用jQuery）：

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

它的清潔，沒有循環或if/else子句並且作爲魅力工作。

Answer 11

略有變化的版本，檢查，並取消選中恭敬地

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

Answer 12

當你調用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/​">​ 

Answer 13

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

Answer 14

試試這個簡單的jQuery：

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

Answer 15

使用jQuery和淘汰賽：

有了這種結合主要複選框與複選框保持同步，除非所有chec都複選，否則它將被取消選中kboxes檢查。

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

Answer 16

我很驚訝，沒有人提到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 />

Answer 17

此示例可與本地JavaScript其中的複選框變量名稱變化，即不是所有的 「富」。

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

Answer 18

我的簡單的解決方案允許，以選擇性地選擇/取消選擇所有複選框形式的給定部分，同時使用不同的名稱對於每個複選框，使得它們可以容易地識別的形式發佈後。

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

我希望你喜歡它！

Answer 19

這裏是一個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; 
    } 

}, 

Answer 20

簡單的一點：

jQuery的 - 當點擊一個按鈕或股利或一個標籤元素。勾選頁面上的所有複選框。請記住，您必須調整：複選框以使其更具體。

jQuery("#My-Button").click(function() { 

    jQuery(':checkbox').each(function() { 
    if(this.checked == true) { 
     this.checked = false;       
    } else { 
     this.checked = true;       
    }  
    }); 

}); 

Answer 21

下面的形式：

<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")); 
}); 

Answer 22

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); 
}); 

Answer 23

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

Answer 24

您可能具有相同的形式套不同的複選框。下面是選擇由類名/取消選擇複選框，使用香草的解決方案javascript函數document.getElementsByClassName

Select All按鈕

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

Answer 25

如果你想正常降級您可以使用這個簡單的代碼

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