混合入力のグループ要素の1つを選択するにはどうすればよいですか？

Question

混合入力のグループ要素の1つを選択するにはどうすればよいですか？我々はテキストエリアをクリックすると、ラジオボタンがchecked atribureを失っ必要があります。私が考える

<div class="item"> 
    <input type="radio" name="group1" value="value1">Value1</input> 
    <input type="radio" name="group1" value="value2">Value2</input> 
    <input type="radio" name="group1" value="value3">Value3</input> 
    <textarea name="group1"></textarea> 
</div> 
    <div class="item"> 
    <input type="radio" name="group2" value="value1">Value1</input> 
    <input type="radio" name="group2" value="value2">Value2</input> 
    <input type="radio" name="group2" value="value3">Value3</input> 
    <textarea name="group2"></textarea> 
</div> 

：

は、私は次のコードを持っています。 Like：

$('.item textarea').on('click', function(){ 
    $($(this).parent + 'input[type="radio":checked]').each(function(){ 
    $(this).checked = false; 
    }); 
}); 

しかし、それは動作しません。 parentオブジェクトの問題だと思います。ありがとう。

Answer 1

あなたのバリアントには多くの問題があります。まず、セレクタ構築に問題があります：$($(this).parent + 'input[type="radio":checked]')。ここでは、jQueryオブジェクトと、正しくない文字列セレクタを混在させます。さらに、親要素はメソッドparent()で取得されますが、プロパティは取得されません。次に、jQueryオブジェクトにはcheckedという属性がありません。ユーザーがtextareaに入ったときに、すべての無線をオフにする必要がある場合は、ちなみにhttp://jsfiddle.net/TEk9c/

：DEMO

$('.item textarea').on('click', function() { 
    $(this).siblings(":radio").prop("checked", false); 
}); 

：考慮我々は、この実行可能なコードを取得することができます記載されているすべての問題を取る

マウスclickを使用するだけでなく、キーボードを使用すると、代わりにfocusイベントを使用することができます。

Answer 2

あなたはname属性に、それをベースにする場合は、Attribute Equals Selectorを使用することができます。

$('.item textarea').on('click', function() { 
    $(':radio[name="' + this.name + '"]').prop("checked", false); 
}); 

必要なラジオボタンは常に同じdiv.itemになります場合は、さらに厳しいソリューションを書くことができます。この例では、最初に、クラスitemを持つ最も近い親を見つけ、同じname属性を持つラジオを検索します。

$('.item textarea').on('click', function() { 
    $(this).closest('.item') 
     .find(':radio[name="' + this.name + '"]') 
      .prop("checked", false); 
}); 

一つの有効ノート：<input>それは内部の内容や決算属性を持つことができない、void elementです。あなたはそれを、HM、ラベルを与えること<label>要素を使用する必要があります。有効性に関する注意

<label><input type="radio" name="group1" value="value1" /> Value1</label> 

は

jsFiddle Demo with labels added