☰

HTML で「すべて選択」チェックボックスを実装するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html checkbox selectall
HTML で「すべて選択」チェックボックスを実装するにはどうすればいいですか? 質問する

複数のチェックボックスがある HTML ページがあります。

「すべて選択」という名前のチェックボックスがもう 1 つ必要です。このチェックボックスを選択すると、HTML ページ内のすべてのチェックボックスが選択される必要があります。どうすればよいでしょうか?

ベストアンサー1

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

おすすめ記事