Снимите флажки переключателей, используя общие селекторы jQuery

Question

У меня есть следующая форма (она генерируется динамически, и у меня есть несколько копий с именем от form-0 до form-3)

<form id="form-0" name="0">
<b>what is bla?</b><br>
<div class="ansN" id="ans0"><input type="radio" name="answerN" value="0"> aaa </div>
<div class="ansN" id="ans1"><input type="radio" name="answerN" value="1"> bbb </div>
<div class="ansN" id="ans2"><input type="radio" name="answerN" value="2"> ccc </div>
<div class="ansN" id="ans3"><input type="radio" name="answerN" value="3"> ddd </div>
<input type="submit" value="Submit your answer">
</form>

(игнорируйте div, они используются для некоторых другихцель)

Пытаемся создать функцию снятия отметки, чтобы она работала со всеми переключателями на странице, поэтому я поиграл с консолью и попытался отменить выбор, используя это:

$('form[id^="form-"]').find("input:radio:checked").attr('checked', false);
$('form[id^="form-"]').find("input:radio:checked").removeAttr("checked");

Таким образом, селектор нашел все отмеченные кнопки, но не снял их, почему?когда я использую прямой вызов JS: document.forms[0].answerN[3].checked = false, он работает нормально, поэтому я могу использовать его внутри цикла, но здесь я стараюсь избегать циклов.Есть ли лучший способ?

Моя цель состоит в том, чтобы иметь функцию снятия отметки, поэтому второй щелчок на переключателе сам по себе снимает отметку

Answer 1

Если вы используете jQuery 1.6, вы можете использовать prop() вместо attr():

$('form[id^="form-"]').find("input:radio:checked").prop('checked',false);

// OR (not recommended)

$('form[id^="form-"]').find("input:radio:checked").removeProp('checked');

Однако этоне рекомендуется использовать вариант removeProp, согласно документации :

Не используйте этот метод для удаления собственных свойств, таких как checked , отключено или выбрано .Это полностью удалит свойство и после удаления не может быть снова добавлено к элементу.Используйте .prop (), чтобы установить для этих свойств значение false.

(спасибо @ noah1989 за указание на это)

attr() возвращает значение, котороебыли установлены в исходном коде, и prop() извлекает текущее, динамически установленное значение атрибута.

Вы можете увидеть пример jsFiddle здесь

Answer 2

Вы можете снять галочку, используя

$('input[name=foo]').attr('checked', false);

Мое первоначальное предположение состоит в том, что вы получаете коллекцию радио кнопок от вашего find. Таким образом, вы должны использовать .each() для их зацикливания и установить атрибут checked в false для каждого отдельного.

Примерно так (не testet, поэтому может быть синтаксическая ошибка)

$('form[id^="form-"]').find("input:radio:checked").each(
  function() {
    $(this).attr('checked', false);
  }
);

Answer 3

<input type="radio" id="ra1" onclick="change('ra1')" onmousedown="getvalue('ra1')"/>
function getvalue(id){
    ischecked = document.getElementById(id).checked;
}
function change(id){
    if(ischecked == false)
        document.getElementById(id).checked=true;
    else
        document.getElementById(id).checked=false;
}