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表示.animals是.radio的祖先。

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

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

 });

一个想法，你的代码 DUPLICATE IDS ，避免它。

Answer 2

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

$(".animals .radio")在类“animals”的元素中查找带有“radio”类的元素。

Answer 3

如何不使用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);
});

Answer 4

$(".animals .radio")正在为您提供课堂广播的所有元素，这些元素的父母都有类动物。

你想要动物和广播这两个类的元素，就像$(".animals.radio")

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

4 个答案: