ラジオボタンの選択に基づいてdivを表示および非表示にする方法

Question

ラジオボタンを選択するとラジオボタンが2つ表示され、divとdivを表示する必要があります。以下は私のスクリプトですが、なぜ動作していないのかわかりません。

はJavaScript

$(document).ready(function() { 
 
    $(".text").show(); 
 
    $(".text1").hide(); 
 
    $("#r1").click(function() { 
 
    $(".text").show(); 
 
    $(".text1").hide(); 
 
    }); 
 

 
    $("#r2").click(function() { 
 
    $(".text1").show(); 
 
    $(".text").hide(); 
 
    }); 
 

 
});

HTML

<p>Show textboxes 
    <input type="radio" name="radio1" id="r1" checked value="Show" onClick="getResults()">Do nothing 
    <input type="radio" name="radio1" id="r2" onClick="getResults()" value="Show"> 
</p> Wonderful textboxes: 
<div class="text"> 
    <p>Textbox #1 
    <input type="text" name="text" id="text" maxlength="30"> 
    </p> 
    <p>Textbox #2 
    <input type="text" name="text" id="text" maxlength="30"> 
    </p> 
</div> 

<div class="text1"> 
    <p>Textbox #3 
    <input type="text" name="text1" id="text1" maxlength="30"> 
    </p> 
    <p>Textbox #4 
    <input type="text" name="text2" id="text1" maxlength="30"> 
    </p> 
</div> 

here is jsfiddle link

Answer 1

change()イベントハンドラを使用して、変更イベントを処理し、ブール値引数を使用してtoggle()メソッドを使用して要素状態を切り替えます。

$(document).ready(function() { 
 
    // attach change event handler 
 
    $("#r1,#r2").change(function() { 
 
    // toggle based on the id 
 
    $(".text").toggle(this.id == 'r1'); 
 
    $(".text1").toggle(this.id == 'r2'); 
 
    // trigger change event to hide initially 
 
    }).first().change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p>Show textboxes 
 
    <input type="radio" name="radio1" id="r1" checked value="Show">Do nothing 
 
    <input type="radio" name="radio1" id="r2" value="Show"> 
 
</p> Wonderful textboxes: 
 
<div class="text"> 
 
    <p>Textbox #1 
 
    <input type="text" name="text" maxlength="30"> 
 
    </p> 
 
    <p>Textbox #2 
 
    <input type="text" name="text" maxlength="30"> 
 
    </p> 
 
</div> 
 

 
<div class="text1"> 
 
    <p>Textbox #3 
 
    <input type="text" name="text1" maxlength="30"> 
 
    </p> 
 
    <p>Textbox #4 
 
    <input type="text" name="text2" maxlength="30"> 
 
    </p> 
 
</div>

---

FYI：属性は、要素のグループのために、ページ上で一意である必要がありますIDを使用しながら、そうでない場合にのみIDを持つ最初の要素を選択しますクラス属性を使用しますセレクタ。

Answer 2

コードが正常に見えています。あなたが適切

あなたのコードは、後にjqueryの参照を追加して正常に動作している

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $(".text").show(); 
    $(".text1").hide(); 
    $("#r1").click(function() { 
    $(".text").show(); 
    $(".text1").hide(); 
    }); 

    $("#r2").click(function() { 
    $(".text1").show(); 
    $(".text").hide(); 
    }); 

}); 
</script> 

Answer 3

のようにjQueryのを追加していること、それは確認してください。非表示と表示のための

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

Answer 4

使用トグル方法は https://www.w3schools.com/jquery/eff_toggle.asp