如何选择混合输入的组元素之一？

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