選択ドロップダウン メニュー内のチェックボックス機能をシミュレートするにはどうすればよいですか?

選択オプション メニューにチェックボックス機能を実装

選択オプション メニュー内にチェックボックスをネイティブに含めることはできないにもかかわらず、HTML を利用した賢い回避策が存在します。 、CSS、JavaScript。

コード実装:

1. HTML:

   • 「オプションを選択」ドロップダウンを持つ複数選択 div を含むフォームを作成します。
   • 個々のチェックボックスを含む「checkboxes」という名前の隠し div を定義します。 for 属性を使用してラベルをチェックボックスにリンクします。

2. CSS:

   • 複数選択、selectBox、目的の外観とホバーのための overSelect 要素とチェックボックス要素エフェクト。

3. JavaScript:

   • クリック時にチェックボックス div の表示を切り替える showCheckboxes() 関数を定義します。のselectBox.

説明:

複数選択 div は、選択オプション メニューとして機能します。クリックすると、showCheckboxes() 関数はチェックボックス div を表示または非表示にします。各チェックボックスのラベルは、ドロップダウンのオプションを表します。ラベルの上にマウスを置くとラベルが別の色で強調表示され、チェックボックスがオンになったときと同様の視覚的なフィードバックが表示されます。

注:
このソリューションでは選択オプション メニュー内のチェックボックス機能が可能ですが、チェックボックス要素のネイティブのアクセシビリティ機能は提供されません。

以上が選択ドロップダウン メニュー内のチェックボックス機能をシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。