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

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屬性。 喜歡：

$('.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元素采用方法parent()而不是屬性。 然后，jQuery對象沒有checked屬性。

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

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

演示： http : //jsfiddle.net/TEk9c/

順便說一句，如果您不僅需要使用鼠標click而且要使用鍵盤輸入用戶輸入textarea時需要取消選中所有廣播，則可以使用focus事件。

Answer 2

如果要基於name屬性，則可以使用Attribute Equals Selector ：

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

如果您需要的單選按鈕始終位於同一div.item ，則您甚至可以編寫更嚴格的解決方案。 在此示例中，首先我們找到具有class item的最接近的父級，然后在其中搜索具有相同name屬性的收音機。

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

一個有效性注意事項 ： <input>是一個void元素 ，它不能包含內容和結束屬性。 您必須使用<label>元素為其賦予一個hm標簽：

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

帶有標簽的jsFiddle演示