Geek Answers Handbook

Show field if radio button switch is checked with jQuery

I have the following code:

<fieldset> <legend>Do you currently have SolidWorks</legend> <ul> <li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li> <li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li> </ul> </fieldset> <fieldset id="boxReseller" style="display:none;"> <legend>Who is your SolidWorks reseller?</legend> <ul> <li><label for=""><input type="radio" name="reseller" value="Cad Connect" /> Cad Connect</label></li> <li><label for=""><input type="radio" name="reseller" value="Cadtek" /> Cadtek</label></li> <li><label for=""><input type="radio" name="reseller" value="CCSL" /> CCSL</label></li> <li><label for=""><input type="radio" name="reseller" value="Innova" /> Innova</label></li> <li><label for=""><input type="radio" name="reseller" value="NT CAD/CAM" /> NT CAD/CAM</label></li> <li><label for=""><input type="radio" name="reseller" value="Solid Engineer" /> Solid Engineer</label></li> <li><label for=""><input type="radio" name="reseller" value="Solid Solutions Ireland" /> Solid Solutions Ireland</label></li> <li><label for=""><input type="radio" name="reseller" value="Solid Solutions Management" /> Solid Solutions Management</label></li> <li><label for=""><input type="radio" name="reseller" value="TMS Scotland" /> TMS Scotland</label></li> </ul> </fieldset>

What I want to do is hide the second set of fields by default and if a person selects Yes, a window will appear, and if they select "No" or "Yes" is not selected, the window will be hidden again.

Can anyone help? Thanks.

+4
source share
5 answers

Ref Nick Craver - A good solution, although it is more obvious, as shown below

  $("input[name='solidworks']").change(function() { $("#boxReseller").toggle(); });​​​​​​ $("input[name='solidworks']:checked").change(); //trigger correct state onload

Leaving the switch as a wild card (undefined, whatever terminology you prefer), I found that it works more efficiently. Nice, though, thanks :)

+1
source

You can do it:

 $("input[name='solidworks']").change(function() { $("#boxReseller").toggle(this.value == "Yes"); });​​​​​​ $("input[name='solidworks']:checked").change(); //trigger correct state onload

You can try trying the markup in the question here and try the pre-tested version of "Yes" here .

+16
source

Demo

http://jsfiddle.net/Wpt3Y/

 jQuery(function(){ jQuery("input[name=solidworks]").change(function(){ if ($(this).val() == "Yes") { jQuery("#boxReseller").slideDown() } else { jQuery("#boxReseller").slideUp(); } }); });

+3
source

Somthing like (Sorry if there are typos, my coffee has not yet been made):

  <fieldset id="fs"> <legend>Do you currently have SolidWorks</legend> <ul> <li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li> <li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li> </ul> </fieldset>

There are ways to do it better, but my coffee is not made. will edit as soon as I get my elixir.

 <script>attr('checked','checked') $("#fs:checkbox").click(function(){ if($("#rdYes:checked").attr('checked','checked')) { $("#boxReseller").css('display', 'block'); }) } }); </script>
0
source 
 $(document).ready(function() { $("input[name=solidworks]").change(function() { if ($this).val() == "Yes") { $("#boxReseller").slideDown('fast'); } else { $("#boxReseller").hide('fast'); } }) })
0
source

More articles:


All Articles