如何從visibile HTML區域獲取選定的單選按鈕值？

Question

我有兩個以下的HTML ULs。

<a href="javascript:;" id="detail_buttons">Click</a> 

<ul class="plan none"> 
    <li> 
     <p>One month</p> 
     <label for="2" class="label_radio"> 
      <input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold"> 
     </label> <strong>40 ₪</strong> 

    </li> 
    <li> 
     <p>Three months</p> 
     <label for="3" class="label_radio"> 
      <input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked"> 
     </label> <strong>70 ₪</strong> 

    </li> 
    <li> 
     <p>Six months</p> 
     <label for="4" class="label_radio"> 
      <input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold"> 
     </label> <strong>100 ₪</strong> 

    </li> 
</ul> 
<hr /> 
<ul class="plan"> 
    <li> 
     <p>One month</p> 
     <label for="2" class="label_radio"> 
      <input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two"> 
     </label> <strong>40 ₪</strong> 

    </li> 
    <li> 
     <p>Three months</p> 
     <label for="3" class="label_radio"> 
      <input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two"> 
     </label> <strong>70 ₪</strong> 

    </li> 
    <li> 
     <p>Six months</p> 
     <label for="4" class="label_radio"> 
      <input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two"> 
     </label> <strong>100 ₪</strong> 
    </li> 
</ul> 

第一UL與display: none並且具有一個單選按鈕被默認選中並且沒有選擇的第二UL。

現在我想從可見UL中獲得選定的單選按鈕值。

這裏是我的jQuery代碼：

$("#detail_buttons").click(function() { 
    if ($(".plan input[type='radio']:checked").val() != undefined) { 
     alert($(".plan input[type='radio']:checked").val()); 
    } 
}); 

我的jsfiddle：Sample

任何想法？

謝謝。

Answer 1

用這樣的方式：

$(".plan:visible").find("input:radio:checked").val(); 

片段

$("#detail_buttons").click(function() { 
 
    alert($(".plan:visible").find("input:radio:checked").val()); 
 
    return false; 
 
});

.none {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="detail_buttons">Check Value</a> 
 
<ul class="plan none"> 
 
    <li> 
 
    <p>One month</p> 
 
    <label for="2" class="label_radio"> 
 
     <input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold"> 
 
    </label> <strong>40 ₪</strong> 
 

 
    </li> 
 
    <li> 
 
    <p>Three months</p> 
 
    <label for="3" class="label_radio"> 
 
     <input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked"> 
 
    </label> <strong>70 ₪</strong> 
 

 
    </li> 
 
    <li> 
 
    <p>Six months</p> 
 
    <label for="4" class="label_radio"> 
 
     <input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold"> 
 
    </label> <strong>100 ₪</strong> 
 

 
    </li> 
 
</ul> 
 
<hr /> 
 
<ul class="plan"> 
 
    <li> 
 
    <p>One month</p> 
 
    <label for="2" class="label_radio"> 
 
     <input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two"> 
 
    </label> <strong>40 ₪</strong> 
 

 
    </li> 
 
    <li> 
 
    <p>Three months</p> 
 
    <label for="3" class="label_radio"> 
 
     <input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two"> 
 
    </label> <strong>70 ₪</strong> 
 

 
    </li> 
 
    <li> 
 
    <p>Six months</p> 
 
    <label for="4" class="label_radio"> 
 
     <input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two"> 
 
    </label> <strong>100 ₪</strong> 
 
    </li> 
 
</ul>