HTML、CSS、JavaScript を使用してオプション選択メニュー内のチェックボックスをシミュレートするにはどうすればよいですか?

選択オプション メニューへのチェックボックスの追加

選択要素内にチェックボックスを直接埋め込むことはできませんが、 HTML、CSS、JavaScript の組み合わせを使用した同様の機能。

HTMLコード:

選択メニューとチェックボックスを保持する「multiselect」クラスの div コンテナを作成します。

「multiselect」 div 内に、2 つの子 div を作成します。

1. selectBox: この div には、 select 要素と、クリックされたときに選択オプションを覆う透明なオーバーレイ。
2. checkboxes: この div には個々のチェックボックスが保持され、最初は非表示になります。

CSS コード:

次のスタイルをelements:

• multiselect: 固定幅を設定してメニューのサイズを制限します。
• selectBox: select 要素を配置し、を基準としたオーバーレイdiv.
• overSelect: 絶対位置を使用して選択オプションをカバーします。
• checkboxes: 最初は「display: none」を使用してチェックボックスを非表示にします。選択オプションに似たラベルのスタイルを設定します。

JavaScript コード:

「チェックボックス」の表示/非表示を切り替えるイベント リスナーを「selectBox」 div に追加します。 " クリック時の div.

例コード:

<form>
  <div>

このコードは、選択オプションをクリックするとオンとオフを切り替えることができるチェックボックスを備えた [オプションの選択] メニューを提供します。チェックボックスは、選択された項目をメニューに表示することで、選択オプションの動作を模倣します。

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