JQuery: show div on radiobutton select

Question

Hi,

I am trying to use JQuery to show a div when the user selects a particular radio button (Other) within a radiobutton group.

The 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 the JQuery code:

$(document).ready(function(){

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

But its not showing the div 'other locations' when I select the radiobutton'Other'....

Answer 1

Try

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

set the radio button value to Other for this code to work.

Answer 2

You need to give it a value of Other.

Thus, not so

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

but so

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

At first glance, your jQuery code looks fine. I would however prefer click above change, since change doesn't get fired on 1st click if there's no means of preselection.