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

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>

(抱歉，并不是要放置相同的 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") (没有白色类之间的空间)。

$(".animals .radio") 在类为“animals”的元素内查找类为“radio”的元素。