ラジオボタンは他のラジオボタンをクリックした後もチェックされています

Question

ラジオボタンは、ラジオボタンをクリックした後でチェックが外されるように設定されています。また、ラジオボタンが選択されたことに基づいて、ラジオボタンの下のテキスト領域を表示または非表示にします。私のHTMLは

<table id="tableId"> 
    <tbody> 
    <tr> 
     <td> 
     <div id="selectTitle"> 
      Some Select 
     </div> 
     <select id="stuff"> 
      <option value="0">option 0</option> 
      <option value="1">option 1</option> 
      <option value="2">option 2</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div> 
      Radio Options 
     </div> 
     <ul> 
      <li> 
      <input id="rad1" type="radio" /> rad1 </li> 
      <li> 
      <input id="rad2" type="radio" /> rad2 </li> 
      <li> 
      <input id="rad2" type="radio" /> rad3 </li> 
     </ul> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input id="textArea" type="textarea" /> 
     </td> 
    </tr> 
    </tbody> 
</table> 

で、私のjavascriptはここ

$("#rad1").click(function() { 
    $("#rad2").prop("checked", false); 
    $("#rad3").prop("checked", false); 
    $("#textArea").hide(); 
}); 
$("#rad2").click(function() { 
    $("#rad1").prop("checked", false); 
    $("#rad3").prop("checked", false); 
    $("#textArea").hide(); 
}); 
$("#rad3").click(function() { 
    $("#rad1").prop("checked", false); 
    $("#rad2").prop("checked", false); 
    $("#textArea").show(); 
}); 

ある問題です：正しく

RAD1およびRAD2作品。それらをクリックすると、ボタンはチェックされていない状態に切り替わります。ただし、rad3をクリックすると、チェックされたままになり、ページを更新するまでチェックされません。私はその事件を見ていて、彼らの間では何も違うとは思われません。私のコードにjsfiddleがあります。どんな助けもありがとう！あなたはラジオの入力に同じ名前を付ける場合は

Answer 1

、彼らはあなたがuexpectとして動作します：

<ul> 
    <li><input id="rad1" name="rad" type="radio" /> rad1 </li> 
    <li><input id="rad2" name="rad" type="radio" /> rad2 </li> 
    <li><input id="rad3" name="rad" type="radio" /> rad3 </li> 
</ul> 

Answer 2

あなたはグループ内のすべてのあなたのラジオにnameプロパティを置く必要があります。 nameは、3つの無線機で同じにする必要があります。 のような：

<input type="radio" name="radio" value="Val 1"> 
<input type="radio" name="radio" value="Val 2"> 

Answer 3

あなたは、グループのラジオボタンにしたい場合は、それら全てがまったく同じname属性を持っている必要があります。次に、デフォルトで動作を取得します。そこから、単一のchangeイベントハンドラを適用して、選択された値に基づいて#textarea要素を切り替えることができます。

また、rad2というIDは重複していますが、これは無効です。また、無線入力にはvalue属性が必要です。これを試してください：あなたのHTML内

$('input[name="foo"]').change(function() { 
 
    $('#textArea').toggle(this.value == '3'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><input id="rad1" type="radio" value="1" name="foo" />rad1</li> 
 
    <li><input id="rad2" type="radio" value="2" name="foo" />rad2</li> 
 
    <li><input id="rad3" type="radio" value="3" name="foo" checked="true" />rad3</li> 
 
</ul> 
 

 
<input id="textArea" type="textarea" />

Answer 4

ライン26は問題があり、あなたはタイプRAD3のためのIDを重複しています。

idをrad3に変更し、期待どおりに動作しているようです。