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 つのクラスが同じ要素に属していることを意味します。（あなたの場合、これは正しいです）

  2. .animals .radio.animalsの祖先を意味し.radioます。

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

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

 });

そして、あなたのコードに重複したIDSがあると考えてください。それを避けてください。

于 2012-05-08T14:50:13.797 に答える
2

$(".animals .radio")は探しているクエリではありません。そうである必要があります$(".animals.radio")(クラス間に空白はありません)。

$(".animals .radio")クラス「animals」の要素内で、クラス「radio」の要素を探します。

于 2012-05-08T14:51:06.763 に答える
2

2 回使用せず、スターター用にこれらの入力にid=""a を設定するのはどうですか? 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);
}​);​
于 2012-05-08T14:55:48.917 に答える
1

$(".animals .radio")クラスの動物を持つ親を持つクラスのラジオであなたにすべての要素を手に入れています。

動物とラジオの両方のクラスの要素が必要です。$(".animals.radio")

于 2012-05-08T14:53:14.617 に答える