如何選擇混合輸入的組元素之一？

Question

如何選擇混合輸入的組元素之一？

我有下面的代碼：

<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> 

我想：當我們點擊文本區域，單選按鈕應該失去checked atribure。 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屬性。

考慮到描述，我們可以得到這樣的可行代碼的所有問題：

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

DEMO：http://jsfiddle.net/TEk9c/

順便說一句，如果你需要當用戶輸入textarea取消選中所有無線電設備不僅使用鼠標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，它不能有內內容和關閉屬性。你必須使用一個<label>元素，給它一個，嗯，標籤：

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

jsFiddle Demo with labels added