2

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

我有以下代码：

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

我想：当我们点击textarea时，radiobuttons应该失去checked属性。像：

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

但它不起作用。我认为parent对象的问题。谢谢。

4

2 回答 2

3

你的变种有很多问题。首先，您的选择器构造存在问题：$($(this).parent + 'input[type="radio":checked]'). 在这里，您将 jQuery 对象与不正确的字符串选择器混合在一起。此外，父元素采用方法parent()而不是属性。然后，jQuery 对象没有checked属性。

考虑到所描述的所有问题，我们可以得到这个可行的代码：

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

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

顺便说一句，如果您需要在用户textarea不仅使用鼠标click而且使用键盘输入时取消选中所有无线电，您可以使用focus事件来代替。

于 2012-05-08T07:53:50.237 回答
1

如果要基于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 元素，它里面不能有内容和关闭属性。你必须使用一个<label>元素来给它一个，嗯，标签：

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

添加了标签的 jsFiddle Demo

于 2012-05-08T07:59:37.723 回答