Выбор значений двух переключателей jQuery

#jquery #radio-button #selectedvalue

#jquery #переключатель #выбранное значение

Вопрос:

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

 <div class="row1">
    <input type="radio" name="group1" value="0" checked="checked"/>Zero
    <input type="radio" name="group1" value="1" />One
</div>

<div class="row2">
    <input type="radio" name="group2" value="0" checked="checked" />Zero
    <input type="radio" name="group2" value="1" />One
</div>
  

Вместе со следующим кодом jQuery:

 $(document).ready(function() {
    var val1 = "";
    var val2 = "";

    $('input[name="group1"],input[name="group2"]').change(function() {
        val1 = $('input[name="group1"]').val();
        val2 = $('input[name="group2"]').val();
        alert(val1   " : "   val2);
    });

});
  

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

Как вы можете видеть, используя мой jsFiddle здесь:http://jsfiddle.net/2whkp/ Результат всегда 0:0. У меня такое чувство, что это может быть связано с тем, что он всегда просто получает первую переключающую кнопку с таким именем. Однако, если это так, как бы мне обойти это?

Заранее спасибо,

Дэйв

Ответ №1:

Добавьте фильтр :checked в свой селектор, и он будет работать. например

 val1 = $('input[name="group1"]:checked').val();
val2 = $('input[name="group2"]:checked').val();
  

Ответ №2:

 $(document).ready(function() {
    var val1 = "";
    var val2 = "";

    $('input:radio').change(function() {
        val1 = $('input:radio[name="group1"]:checked').val();
        val2 = $('input:radio[name="group2"]:checked').val();
        alert(val1   " : "   val2);
    });

});
  

Ответ №3:

Да, вы правы, это значение первого ввода в группе. Просто используйте $('input[name="group1"]:checked') вместо $('input[name="group1"]')