查找最接近的一組單選按鈕的值

Question

我有多組單選按鈕，並且試圖使用.find()函數動態查找同一分組中單選按鈕的值。

但是，它一直返回undefined。

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

1. .animals.radio表示這兩個類屬於同一個元素。 （在你的情況下這是正確的）

2. .animals .radio意味着.animals是.radio的祖先。

   $(".animals.radio").change(function() { 
   
       alert($(this).closest('fieldset').find('.fruit').val()); 
   
   }); 
   

和人覺得，你的代碼HAVE 重複的ID，避免它。

Answer 2

$(".animals .radio")是不是您正在查找的查詢，它應該是$(".animals.radio")（類之間沒有空白）。

$(".animals .radio")在類「動物」的元素中尋找類「radio」的元素。

Answer 3

$(".animals .radio")正在爲您帶來與班級動物的父母擁有班級收音機的所有元素。

你想與這兩個類動物和無線電元素，這就好比$(".animals.radio")

Answer 4

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