Как сделать выбор одного из элементов группы смешанных входов?

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. как:

$('.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