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

我有多组单选按钮，正在尝试使用

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

但它不断返回未定义的

还尝试：

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

我还有别的办法吗？
我不想为每一组单选按钮都编写代码。
它应该
.animals.radio
，而不是
.animals.radio

 $(".animals.radio").change(function() {

   alert($(this).closest('fieldset').find('.fruit').val());

 });

.animals.radio
表示这两个类属于同一元素。（在你的情况下，这是正确的）

.animals.radio
的意思是
。animals
是
.radio
的祖先

 $(".animals.radio").change(function() {

   alert($(this).closest('fieldset').find('.fruit').val());

 });


有人会想，你的代码有重复的ID，避免它。
$（“.anists.radio”）不是你要找的查询，它应该是$（“.anists.radio”）（类之间没有空格）

$（“.animals.radio”）
在具有类“animals”的元素中查找具有类“radio”的元素。
$（“.animals.radio”）
将获取具有类动物父元素的具有类radio的所有元素

您需要同时包含类animals和radio的元素，这就像
$（“.anists.radio”）
不使用
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() {
    var elm = $(this).closest('fieldset').find('.fruit').filter(':checked');
    alert(elm.value);
}​);​

谢谢你的回答。我来测试一下。（不是要放重复的ID。只是快速复制/粘贴。）谢谢你的回答。我来测试一下。（不是要放重复的ID。只是快速复制/粘贴。）谢谢你的回答。我来测试一下。（并非有意放置重复的ID。只是快速复制/粘贴。）
$('input[type="radio"]').on('change', function() {
    var elm = $(this).closest('fieldset').find('.fruit').filter(':checked');
    alert(elm.value);
}​);​