チェックボックスのような選択オプション メニューを作成するには?

チェックボックスのような選択オプション メニューの作成

一部のユーザーは、チェックボックスを含むオプション選択メニューを表示するという要件に遭遇する可能性があります。従来の HTML 要素は直接実行できません。このジレンマに遭遇した場合でも、心配する必要はありません。HTML、CSS、JavaScript を組み合わせて目的の機能をシミュレートする回避策を紹介します。

以下に提供するコードは、チェックボックスの非表示リストを活用し、操作時にチェックボックスの表示/非表示を動的に切り替えます。 Select Option 要素を使用します。詳細な内訳は次のとおりです:

HTML コード:

HTML 構造は、プレースホルダー オプションを含む標準の Select Option 要素を作成します。その下には、非表示の div (表示が最初は「なし」に設定されている) にチェックボックスが含まれています。

CSS コード:

• 「複数選択」 divメニューの全体的なスタイルを定義します。
• 「selectBox」は、Select Option 要素を垂直方向に配置してオーバーレイします。 "overSelect" div を使用します。
• "overSelect" は選択オプションをカバーし、チェックボックスを表示または非表示にするクリック可能な領域として機能します。
• "checkboxes" はチェックボックス リストの外観を制御します。

JavaScriptコード:

JavaScript 関数「showCheckboxes」は、チェックボックス div の表示を切り替えます。ユーザーが [オプションの選択] をクリックするとトリガーされます。

使用法:

このソリューションを採用するには、好みの [オプションの選択] 項目とチェックボックスのラベルを HTML コードに追加します。要件に応じてスタイルを設定します。

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