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

HTML での「すべて選択」チェックボックスの実装

Web 開発では、ユーザーが複数の項目を選択する必要がある状況に遭遇することがよくあります。リストから。このプロセスを簡素化する多用途の解決策は、「すべて選択」チェックボックスを実装することです。このチェックボックスにチェックを入れると、ページ上の他のすべてのチェックボックスが自動的に選択されます。

JavaScript ソリューション

この機能を実現するには、JavaScript を使用します。実装を示すコード スニペットを次に示します。

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

HTML 統合

次のように JavaScript 関数を HTML コードに組み込みます。

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

機能的動作

「すべて切り替え」チェックボックスがチェックされている場合、他のすべてのチェックボックスが選択されます。チェックを外すと、他のすべてのチェックボックスの選択が解除されます。これにより、ユーザーは 1 回のクリックで複数の項目をすばやく選択または選択解除できます。

以上がHTML で「すべて選択」チェックボックスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。