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

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

HTML 開発における共通の課題は、次を使用して複数のチェックボックスを同時に選択できるようにすることです。 「すべて選択」チェックボックス。この機能により、ユーザーはすべてのチェックボックスの状態を効率的に簡単に切り替えることができます。

「すべて選択」チェックボックスを実装するには、JavaScript 関数を使用できます。関数はすべてのチェックボックスを反復処理し、チェックされたプロパティを「すべて選択」チェックボックスの値に設定する必要があります。このアプローチを示すコード スニペットは次のとおりです。

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

この機能を HTML に統合するには、toggle() を呼び出す onClick イベント ハンドラーを使用して、「Toggle All」または「Select All」というラベルの付いた追加のチェックボックスを追加します。関数。影響を受ける各チェックボックスについて、その name 属性に同じ名前 (例: 「foo」) を割り当てます。

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

次の手順に従うことで、「すべて選択」チェックボックス機能をチェックボックスに追加できます。 HTML ページ。ユーザー エクスペリエンスが向上し、選択プロセスが簡素化されます。

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