複数を選択するJavaScriptの複数選択ボックス-フロントエンドQ&A-php.cn

複数を選択するJavaScriptの複数選択ボックス

WBOY

リリース： 2023-05-22 09:19:07

オリジナル

845 人が閲覧しました

JavaScript は、インタラクティブな Web ページやアプリケーションの作成に使用できる、広く使用されているスクリプト言語です。その中で、複数選択ボックスは Web 開発でよく使用されるフォーム要素であり、ユーザーは 1 つ以上のオプションを選択できます。この記事では、JavaScript を使用して複数のチェックボックスを選択する方法を説明します。

1. HTML 複数選択ボックスの基本的な使用法

HTML で複数選択ボックスを定義するには、タグを使用して設定する必要があります。対応する属性値: name、value、checked。このうち、name 属性は複数選択ボックスの名前を定義するために使用され、value 属性はオプションの値を指定するために使用され、checked 属性はデフォルトの選択項目を設定するために使用されます。

たとえば、次のコードは、リンゴ、バナナ、オレンジの 3 つのオプションを含む「fruits」という名前の複数選択ボックスを作成します。リンゴがデフォルトの選択項目です。

<form>
  <input type="checkbox" name="fruits" value="apple" checked>苹果<br>
  <input type="checkbox" name="fruits" value="banana">香蕉<br>
  <input type="checkbox" name="fruits" value="orange">橙子
</form>

ログイン後にコピー

ユーザーは、チェックボックスをクリックしてオプションをオンまたはオフにできます。ユーザーがフォームを送信すると、選択したオプションがフォームデータとしてサーバーに送信されます。

2. JavaScript は複数選択ボックスの選択を実装します。

HTML によって提供される複数選択ボックス機能は非常に便利ですが、場合によっては、クライアント上で選択されたオプションを操作する必要があります。選択した項目の数を取得するか、選択したオプションをループします。現時点では、JavaScript を使用して、選択された複数選択ボックスの数を取得できます。

選択された複数の選択ボックスの数を取得する

選択された複数の選択ボックスの数を取得するには、document.querySelectorAll() メソッドを使用して選択されたすべてを取得します。複数のボックス要素を選択し、その数を数えます。このメソッドは、指定された CSS セレクターに一致するすべての要素のリストを返します。たとえば、次のコードは、「fruits」という名前の複数選択ボックスで選択されている数を取得します。

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
const checkedCount = checkboxes.length;
console.log(`选中了 ${checkedCount} 个选项。`);

ログイン後にコピー

このコードでは、最初の行で、まず「」という名前の複数選択ボックスで選択されている項目の数を取得します。フルーツ」を document.querySelectorAll() メソッドを通じて使用します。選択ボックス内の選択されたすべての要素は、NodeList オブジェクトに保存されます。 CSS セレクター「input[name="fruits"]:checked」は、選択されたチェックボックス要素と一致するために使用されることに注意してください。このうち、name 属性は選択する複数選択ボックスの名前を指定し、:checked 疑似クラスを使用して選択された要素を選択できます。

2 行目は、checkboxes.length を通じて選択された複数選択ボックスの数を計算します。最後に、console.log() メソッドを使用して結果を出力します。

選択された複数選択ボックスの処理

選択された複数選択ボックスを処理するには、上記と同様のコードを使用して、選択された複数選択ボックスを取得できます。 element を選択し、ループを使用して選択した各要素を横断し、その中で対応する操作を実行します。

たとえば、次のコードは、複数選択ボックスで選択された要素を反復処理し、その値を文字列に追加します。

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
let values = '';
checkboxes.forEach(checkbox => {
  values += checkbox.value + ',';
});
console.log(`选中的选项是：${values}`);

ログイン後にコピー

コードは、まず、選択された複数の要素のリストを取得します。ボックス要素を選択し、forEach() メソッドを使用して、選択した各要素をループします。ループ本体では、現在の要素の値をvalues変数に加算し、最後に結果を出力します。

3. まとめ

この記事では、HTML の複数選択ボックスの基本的な使い方を紹介し、JavaScript を使用して複数の複数選択ボックスを選択する機能を実装しました。選択された複数選択ボックスの数を取得し、選択された複数選択ボックス要素を処理することにより、複数選択ボックスの機能を拡張し、複雑なフォーム操作を実装するための基盤を提供します。この記事が、JavaScript を学習して使用して複数選択ボックスを処理する Web 開発者に役立つことを願っています。

以上が複数を選択するJavaScriptの複数選択ボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。