How to get selected radio button value from visibile HTML area?

Question

I have following HTML with two 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>

First UL is with display: none and have one radio button is selected by default and Second UL is without selected.

Now I want get selected radio button value from visible UL .

Here is my jQuery Code:

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

My JSFiddle: Sample

Any Idea?

Thanks.

Answer 1

Use this way:

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

Snippet

 $("#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>