Поиск значения ближайшего набора переключателей

Question

У меня есть несколько наборов переключателей, и я пытаюсь использовать функцию .find(), чтобы динамически находить значение переключателей в той же группировке.

Однако он продолжает возвращаться не определен.

<fieldset> 
    <div id="border1"> 
    <input id="radio1a" type="radio" id="set1" class="animals radio" value="Zebra"> 
    <input id="radio1b" type="radio" id="set1" class="animals radio" value="Lion"> 
    </div> 
    <div id="border2"> 
    <input id="radio2a" type="radio" id="set2" class="fruit" value="Oranges"> 
    <input id="radio2b" type="radio" id="set2" class="fruit" value="Grapes"> 
    </div> 
</fieldset> 

<fieldset> 
    <div class="border1"> 
    <input id="radio3a" type="radio" id="set3" class="animals radio" value="Monkey"> 
    <input id="radio3b" type="radio" id="set3" class="animals radio" value="Parrot"> 
    </div> 
    <div class="border2"> 
    <input id="radio4a" type="radio" id="set4" class="fruit radio" value="Bananas"> 
    <input id="radio4b" type="radio" id="set4" class="fruit radio" value="Cherries"> 
    </div> 
</fieldset> 

(К сожалению, не имел в виду поставить те же идентификаторы было копировать/вставить.).

Я пытаюсь использовать JQuery динамически найти значения:

$(".animals .radio").change(function() 
{ 
    alert($(this).closest('fieldset').find('.fruit').val()); 
    etc. 
} 

Но он постоянно возвращается undefined

также пытался:

$(this).closest('fieldset').find('.fruit:checked').val() 

Есть ли другой способ, которым я должен приближаться к этому? Я не хочу писать код для каждого набора радиокнопок.

Answer 1

Должно быть .animals.radio, а не .animals .radio.

1. .animals.radio означает, что эти два класса принадлежат к одному элементу. (в вашем случае это правильно)

2. .animals .radio.animals является родоначальником .radio.

   $(".animals.radio").change(function() { 
   
       alert($(this).closest('fieldset').find('.fruit').val()); 
   
   }); 
   

И Думать, ВАШ КОД ИМЕЮТ DUPLICATE IDS, избежать.

Answer 2

$(".animals .radio") не тот запрос, который вы ищете, он должен быть $(".animals.radio") (между пробелами нет пробелов).

$(".animals .radio") ищет элемент с классом «радио» внутри элемента с классом «животные».

Answer 3

$(".animals .radio") доставит вам все элементы с классом радио, в котором есть родители с классными животными.

Вы хотите элементы с обоих классов животных и радио, который, как $(".animals.radio")

Answer 4

Как насчет не используя id="" дважды, и установив type="radio" на эти входы для начинающих? Вы также используете один и тот же идентификатор для нескольких элементов, остановите это?

Это, вероятно, следует:

<fieldset> 


<div id="border1"> 
     <input type="radio" id="radio1a" name="set1" class="animals radio" value="Zebra" /> 
     <input type="radio" id="radio1b" name="set1" class="animals radio" value="Lion" /> 
    </div> 
    <div id="border2"> 
     <input type="radio" id="radio1c" name="set2" class="fruit" value="Oranges" /> 
     <input type="radio" id="radio1d" name="set2" class="fruit" value="Grapes" /> 
    </div> 
</fieldset> 

<fieldset> 
    <div class="border1"> 
     <input type="radio" id="radio2a" name="set3" class="animals radio" value="Monkey" /> 
     <input type="radio" id="radio2b" name="set3" class="animals radio" value="Parrot" /> 
    </div> 
    <div class="border2"> 
     <input type="radio" id="radio2c" name="set4" class="fruit radio" value="Bananas" /> 
     <input type="radio" id="radio2d" name="set4" class="fruit radio" value="Cherries" /> 
    </div> 
</fieldset>​​​​​​​​​​ 

Чтобы получить оба значения:

$('input[type="radio"]').on('change', function() { 
    $(this).closest('fieldset').find('.fruit').each(function() { 
     alert(this.value); 
    }); 
}​);​ 

Чтобы получить только тот, который проверяется:

$('input[type="radio"]').on('change', function() { 
    var elm = $(this).closest('fieldset').find('.fruit').filter(':checked'); 
    alert(elm.value); 
}​);​