如何在HTML中实现“选择所有”复选框？

Question

如何在HTML中实现“选择所有”复选框？

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

我还需要一个名为“SELECT ALL”的复选框。选择此复选框时，必须选中HTML页面中的所有复选框。我该怎么做？

Answer 1

<script&nbsp;language="JavaScript">function&nbsp;toggle(source)&nbsp;{ &nbsp;&nbsp;checkboxes&nbsp;=&nbsp;document.getElementsByName('foo'); &nbsp;&nbsp;for(var&nbsp;checkbox&nbsp;in&nbsp;checkboxes) &nbsp;&nbsp;&nbsp;&nbsp;checkbox.checked&nbsp;=&nbsp;source.checked;}</script><input&nbsp;type="checkbox"&nbsp;onClick="toggle(this)"&nbsp;/>&nbsp;Toggle&nbsp;All<br/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="foo"&nbsp;value="bar1">&nbsp;Bar&nbsp;1<br/><input&nbsp;type="checkbox"&nbsp;name="foo"&nbsp;value="bar2">&nbsp;Bar&nbsp;2<br/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="foo"&nbsp;value="bar3">&nbsp;Bar&nbsp;3<br/><input&nbsp;type="checkbox"&nbsp;name="foo"&nbsp;value="bar4">&nbsp;Bar&nbsp;4<br/>最新情况：这个for each...in构造在Safari 5或Chrome 5中似乎不起作用，至少在本例中是这样的。这段代码应该可以在所有浏览器中工作：function&nbsp;toggle(source)&nbsp;{ &nbsp;&nbsp;checkboxes&nbsp;=&nbsp;document.getElementsByName('foo'); &nbsp;&nbsp;for(var&nbsp;i=0,&nbsp;n=checkboxes.length;i<n;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;checkboxes[i].checked&nbsp;=&nbsp;source.checked; &nbsp;&nbsp;}}

Answer 2

使用jQuery://&nbsp;Listen&nbsp;for&nbsp;click&nbsp;on&nbsp;toggle&nbsp;checkbox$('#select-all').click(function(event)&nbsp;{&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if(this.checked)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Iterate&nbsp;each&nbsp;checkbox &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(':checkbox').each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.checked&nbsp;=&nbsp;true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(':checkbox').each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.checked&nbsp;=&nbsp;false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}});HTML：<input&nbsp;type="checkbox"&nbsp;name="checkbox-1"&nbsp;id="checkbox-1"&nbsp;/><input&nbsp;type="checkbox"&nbsp;name="checkbox-2"&nbsp;id="checkbox-2"&nbsp;/> <input&nbsp;type="checkbox"&nbsp;name="checkbox-3"&nbsp;id="checkbox-3"&nbsp;/><!--&nbsp;select&nbsp;all&nbsp;boxes&nbsp;--><input&nbsp;type="checkbox"&nbsp;name="select-all"&nbsp;id="select-all"&nbsp;/>

Answer 3

我不确定是否有人没有这样回答(使用jQuery):&nbsp;&nbsp;$(&nbsp;'#container&nbsp;.toggle-button'&nbsp;).click(&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(&nbsp;'#container&nbsp;input[type="checkbox"]'&nbsp;).prop('checked',&nbsp;this.checked) &nbsp;&nbsp;})它是干净的，没有循环，也没有if/etc子句，而且很有魅力。