JavaScript を使用して、ONCLICK を使用せずにラジオ ボタンの選択に基づいて div の可視性を制御する

Question

部分的に有効な HTML コードがあります。ラジオボタンの選択に基づいてテキスト入力を表示しようとしています。私にとってどのように機能するかというと、ラジオボタンを押すと他のオプションが非表示になりますが、最初に画面が読み込まれると、3 つのオプションがすべて表示されます。これは、関数がクリック時に呼び出され、最初のラジオボタンの選択されたオプションがクリックを構成しないためだと思います。最初のリクエストでのみ表示される onload イベント リスナーを作成しようとしましたが、うまくいきませんでした。 これは私のコードです

ああああ

Answer 1

条件付きで表示/非表示にする必要がある各セクションを「サブフォーム」と呼びましょう。各サブフォームに CSS クラスを追加できます。例:

リーリー

次に、現在選択されているオプションに対応するサブフォームを除くすべてのサブフォームを非表示にする CSS ルールを導入できます。 CSS がこの選択を追跡して、すべてのオプションを含む要素のデータ属性として認識できるようにする良い方法 (例:

)。初期値によって、どのサブフォームが最初に表示されるかが決まります:

リーリー

...および対応するスタイル...

リーリー

すべてを結び付けるために、データ プロパティを更新する JS 関数を作成できます。 1 ページ (またはフォーム内) に複数のサブフォーム セットがある場合があるため、どの選択を更新するかを決定すると便利です:

リーリー リーリー

追加のオプションが必要な場合は、追加の subform CSS クラスを追加できます。複数のサブフォーム セットが必要な場合は、それらを追加し、必ず一意の id ​​を持つクラスを使用してください。 すべてのサブフォームを含むように HTML 要素を分割します。

実際の例については、完全なコード スニペットを参照してください。

リーリー リーリー リーリー