查找最接近的一组单选按钮的值

Question

我有多组单选按钮，并且试图使用.find()函数动态查找同一分组中单选按钮的值。

但是，它一直返回undefined。

<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> 

（对不起，不是故意把相同的ID当时复制/粘贴。）

我试图使用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()); 
   
   }); 
   

和人觉得，你的代码HAVE 重复的ID，避免它。

Answer 2

$(".animals .radio")是不是您正在查找的查询，它应该是$(".animals.radio")（类之间没有空白）。

$(".animals .radio")在类“动物”的元素中寻找类“radio”的元素。

Answer 3

$(".animals .radio")正在为您带来与班级动物的父母拥有班级收音机的所有元素。

你想与这两个类动物和无线电元素，这就好比$(".animals.radio")

Answer 4

如何不使用id=""两次，并设置这些输入的先发球员type="radio"？ 你也使用相同的ID为多个元素，停止？

这也许应该是：

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