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

Question

У меня есть следующий 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), который должен:

1. поиск всех радиостанций с name = chkbox и настройкой attr('checked') = false
2. поиск радиостанции, имеющей 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'

Пожалуйста, дайте мне знать, что я делаю не так. Большое, большое спасибо!

Answer 1

Попробуйте это:

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

Answer 2

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

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);
}); 

}

Answer 3

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

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

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

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

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

Answer 4

Я бы использовал относительную позицию 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>

Answer 5

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

Answer 6

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