如何实现“全选"HTML 中的复选框? [英] How to implement "select all" check box in HTML?

问题描述

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

I have an HTML page with multiple checkboxes.

我还需要一个名为全选"的复选框.当我选中此复选框时，必须选中 HTML 页面中的所有复选框.我该怎么做?

I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?

推荐答案

<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 中.此代码应该适用于所有浏览器:

The for each...in construct doesn't seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:

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

这篇关于如何实现“全选"HTML 中的复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！