JQuery: установите флажок, основанный на имени и значении

У меня есть следующий HTML:

<form id="test">
  <input type="radio" value="A" name="C1"/>
  <a href="javascript:selectCheckbox('C1', 'A');"> OPTION-A </a>

  <input type="radio" value="B" name="C1"/>
  <a href="javascript:selectCheckbox('C1', 'B');"> OPTION-B </a>

 <input type="radio" value="C" name="C1"/>
  <a href="javascript:selectCheckbox('C1', 'C');"> OPTION-C </a>

  // several other: C2, C3, ..
</form>

И я пытаюсь реализовать selectCheckbox( chkbox, value), который должен:

найдите все радио с name = chkbox и установите attr('checked') = false
найдите радио с name = chkbox AND val() = value и установите attr('checked') = true

Я не могу понять, что такое правильный селектор, я попробовал следующее без везения:

var name = "#" + chkbox + " :checked";
$(name).each(..  // doesn't work

$('#'+chkbox).each( .. // if finds only the first occurence
                       // of i.e. C1, although I would expect 3

$("input[@name='"+chkbox+"']").each( function() { ..
// leaves me with the following error:
// Warning: Expected attribute name or namespace but found '@name'

Пожалуйста, дайте мне знать, что я делаю неправильно. Огромное спасибо!

Ответы

Ответ 1

Я бы использовал относительную позицию DOM для навигации. Обратите внимание, что вы не можете иметь разные элементы с одним и тем же идентификатором, но в этом случае это необязательно, так как вы можете использовать селектор атрибутов имени, чтобы найти правильные входы. Обратите внимание, что вы уже знаете, какие из различных входов нужно проверять в зависимости от позиции ссылки, которая нажата. Я предпочитаю, чтобы код был отделен от разметки, поэтому я дал ссылкам класс, чтобы упростить их выбор и переместить приложение обработчика кликов в код.

Обновить. Обратите внимание, что я удалил код, чтобы снять отметку с других радиостанций. С радиоприемниками, для установки одного из них необходимо автоматически отключить любую из других.

$(function() {
     $('a.checkbox-selector').click( function() {
         // get the checkbox immediately preceding the link -- this should
         // be checked.  Checking it should automatically uncheck any other
         // that may be checked.
         $(this).prev(':checkbox');
                .attr('checked',true);
         return false;  // don't process the link
     });
});

<form id="test">
  <input  type="radio" value="A" name="C1"/>
  <a href="#" class="checkbox-selector"> OPTION-A </a>

  <input  type="radio" value="B" name="C1"/>
  <a href="#" class="checkbox-selector"> OPTION-B </a>

  <input  type="radio" value="C" name="C1"/>
  <a href="#" class="checkbox-selector"> OPTION-C </a>

  <!-- several other: C2, C3, ... -->
</form>

Ответ 2

Попробуйте следующее:

$('input:radio[name="' + chkboxName + '"][value="' + value + '"]')
    .attr('checked', 'checked');

Ответ 3

Спасибо за вашу помощь, я наконец получил его:

function selectTestAnswer( chkbox, value ) {
    $("[name="+chkbox+"]").each( function() {   
        if ( $(this).val() ==  value )
            $(this).attr('checked', true);
        else
            if ( $(this).attr('checked') == true)
                $(this).attr('checked', false);
});

}

Ответ 4

Вы можете использовать prop() вместо attr(), если ваша версия jquery > 1.6

Ссылка на эту ссылку http://api.jquery.com/prop/

Как и в jQuery 1.6, метод .prop() предоставляет способ явно извлекать значения свойств, в то время как .attr() извлекает атрибуты.

Итак, код, который вы ищете, больше похож на

$('input:checkbox[name="Validators"][value="' + v + '"]').prop('checked',true);

Ответ 5

У вас не может быть несколько элементов с одним и тем же идентификатором на одной странице. Все ваши элементы ввода имеют идентификатор "C1".

Ответ 6

Попробуйте $("input[name='C1'] :checked]"). Идентификаторы должны быть уникальными, поэтому jquery, вероятно, не ожидает возврата более одного элемента.