2

我有多组单选按钮，并试图使用该.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()

我应该用另一种方法来解决这个问题吗？我不想为每一组单选按钮编写代码。

4

4 回答 4

2

它应该.animals.radio，不是.animals .radio。

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

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

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

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

 });

有人认为，您的代码有重复的 ID，请避免使用它。

于 2012-05-08T14:50:13.797 回答
2

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

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

于 2012-05-08T14:51:06.763 回答
2

不使用id=""两次，并type="radio"在这些输入上为初学者设置 a 怎么样？您还对多个元素使用相同的 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);
}​);​
于 2012-05-08T14:55:48.917 回答
1

$(".animals .radio")正在为您提供具有班级动物父母的班级广播的所有元素。

你想要同时具有动物类和无线电类的元素，就像$(".animals.radio")

于 2012-05-08T14:53:14.617 回答