他のチェックボックスを制御する「すべて選択」チェックボックスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

他のチェックボックスを制御する「すべて選択」チェックボックスを作成するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-09 09:07:02

オリジナル

192 人が閲覧しました

How to Create a

他のすべてのチェックボックスを選択するチェックボックスを実装する方法

HTML で「すべて選択」チェックボックスを実装すると、選択したチェックボックスを簡単に切り替えることができます上の他の複数のチェックボックスの状態

解決策:

この機能を実現するには:

次の JavaScript コードを使用してスクリプトタグを作成します:

<script>
function toggle(source) {
  const checkboxes = document.getElementsByName('foo');
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

ログイン後にコピー

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

ログイン後にコピー

「選択」をクリックしたときすべて」チェックボックスをオンにすると、スクリプトは「foo」という名前のすべてのチェックボックスをループし、チェックされたプロパティを「すべて選択」のチェックされた状態と一致するように設定します。チェックボックス。

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