JQuery: show div on radiobutton select
14,834
Solution 1
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.
Solution 2
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.
Author by
van
Updated on June 14, 2022Comments
-
van almost 2 years
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 it's not showing the div other locations when I select the radiobutton
Other
.