JavaScript を使用してオプションを選択する際にチェックボックスを使用するにはどうすればよいですか?

オプションの選択でチェックボックスを使用する必要がある場合があります。選択オプションを含むチェックボックスを導入することで、ユーザーが複数のオプションを選択できるようにします。ただし、 タグの複数のプロパティを使用する場合、「ctrl 左クリック」を押してそれらを選択できますが、これはユーザー エクスペリエンスとしては悪くなります。したがって、ユーザー エクスペリエンスを向上させるために、 メニューにチェックボックスを導入できます。

ここでは、JQuery と JavaScript を使用して、 メニューで選択されたチェックボックスの値を管理します。

カスタム選択メニューを作成する

HTML の 要素では、オプションとしてチェックボックスを追加できません。したがって、HTML 要素を使用してカスタム ドロップダウン メニューを作成し、そのオプションとしてチェックボックスを追加できます。

＃＃＃文法＃＃＃

ユーザーは JavaScript を使用して、次の構文に従ってカスタム ドロップダウン メニューのチェックボックスを管理できます。

リーリー

上記の構文では、showCheckBoxes 変数の値に基づいてカスタム ドロップダウン リストのオプションを表示します。さらに、selectedOptions 配列を反復処理して、選択されているすべてのチェックボックスを 1 つずつ取得できます。

＃＃＃ステップ＃＃＃

ステップ 1

- メニュー テキストを含む div を作成します。

• ステップ 2
- 次に、カスタム HTML を使用し、オプションにチェックボックス入力タイプを使用します。

• ステップ 3
- onClick イベントを div 要素に追加します。ユーザーが div をクリックすると、showOptions() メニューが呼び出されます。

• ステップ 4
- JavaScript で showCheckBoxes 変数を宣言し、true のブール値で初期化します。 showCheckBoxes 変数に基づいてカスタム ドロップダウンのオプションを表示します。

• ステップ 5
- ユーザーがドロップダウン div 要素をクリックするたびに、showCheckBoxes 変数の値に基づいてオプション div の表示を変更します。

• ステップ 6
- 次に、getOptions() 関数を定義します。 getOptions() 関数では、for ループを使用して selectedOptions 配列を反復処理することにより、選択されたすべてのチェックボックスにアクセスし、選択されたすべてのチェックボックスの値を出力します。

• 例 1

以下の例では、上記のアルゴリズムで説明したようにカスタム選択メニューを作成しました。ユーザーは複数のチェックボックスをオンにすることで、複数のオプションを選択できます。

さらに、ユーザーが [選択されたチェックボックスを取得] ボタンをクリックすると、 getOptions() 関数が呼び出され、選択されたすべてのチェックボックスの値が出力されるため、選択メニュー オプションのすべての選択内容を取得できます。

リーリー

このチュートリアルでは、HTML、CSS、JavaScript を使用してカスタム選択メニューを作成する方法を学習しました。さらに、ユーザーは、Bootstrap などの CSS ライブラリを使用して、チェックボックスを含む選択メニューを作成できます。

以上がJavaScript を使用してオプションを選択する際にチェックボックスを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。