Have Geek Brain

JQuery: show div for radiobutton selection

I am trying to use jQuery to display a div when the user selects a specific radio button ( Other

) inside a group of radio objects.

html is below

<div id="countries">

<input id="Washington_D.C" type="radio" name="location" value="Washington">Washington D.C</input>
<input id="Other" type="radio" name="location" value="">Other</input>
    <div id="other locations" style="display: none">
    </div>
</div>

Using jQuery code:

$(document).ready(function(){
    $("radio[@name='location']").change(function(){
        if ($("radio[@name='location']:checked").val() == 'Other')
        $("#county_drop_down").show();
    });
 });

But it doesn't show the div of other places when I select the radio camera Other

.

+2


a source to share


2 answers


You need to provide a value Other

.

So not so

<input id="Other" TYPE="RADIO" NAME="location" VALUE="">Other</input>


but

<input id="Other" TYPE="RADIO" NAME="location" VALUE="Other">Other</input>

At first glance, your jQuery code looks fine. However, I would prefer the click

above change

as it change

doesn't fire on the first click unless there is a preselection facility.

+7


a source


Try

$("radio[name='location']").change(function(){
    if ($(this).val() === 'Other')
    {
        if($(this).is(":checked"))
        {
            $("#county_drop_down").show();
        }
    }
});


set "Radio" to "Other" for this code to work.

+2


a source






More articles:


All Articles