Show box if radio button checked using jQuery

Question

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 fieldset by default and if a person chooses Yes then the box will appear, and if they choose No or Yes is not selected then the box will hide again.

Can anyone help? Thanks.

Nick Craver · Answer 1 · 2010-09-24T21:44:08.337

16

You could do this:

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

You can give it a try with the markup in the question here, and try the pre-checked "Yes" version here.

edited Sep 24 '10 at 21:44

answered Sep 24 '10 at 21:27

Nick Craver

623,446
136
1,297
1,155

This works great, can you explain how it works please as it seems a lot more confusing than the standard if and else statements others have used, but works better. – Cameron Sep 24 '10 at 21:51
1

@Cameron - Sure :) The `.toggle(bool)` takes a boolean, whether to call `.show()` (if true) or `.hide()` (if false), so we're just checking that the radio button that just changed was the "Yes" one or not. The last line gets the selected one and runs the handler on it...again if its value is "Yes" it shows, otherwise it hides, make sense? – Nick Craver Sep 24 '10 at 22:26
@Nick: a very elegant solution, I'll be adding it to my toolbox! (If you swing that way, you can make this even terser: remove the final line and rewrite the third line as `}).filter(':checked').change();`.) – Jordan Gray Oct 13 '11 at 11:07
I'm just learning jQuery (and JS). In my app, it's possible that neither radio button is initially checked, in which case the last line doesn't select anything to trigger. How do I handle that case? – Bob.at.Indigo.Health Mar 11 '13 at 05:01
Never mind... I just realized that I missed the "style=display:none", which causes the second set of radio buttons to be initially hidden. – Bob.at.Indigo.Health Mar 11 '13 at 07:20

Praveen Prasad · Answer 2 · 2010-09-24T21:36:40.523

3

Demo

http://jsfiddle.net/Wpt3Y/

jQuery(function(){
        jQuery("input[name=solidworks]").change(function(){          


            if ($(this).val() == "Yes") {
            jQuery("#boxReseller").slideDown()
            }
            else {
            jQuery("#boxReseller").slideUp();
            }                                                            
       });
});

edited Sep 24 '10 at 21:36

answered Sep 24 '10 at 21:28

Praveen Prasad

31,561
18
73
106

What if a user refreshes the page and the Yes is already checked? The box is hidden. – Cameron Sep 24 '10 at 21:42
in that case you have to check the value of radio at DOM ready and hide/show your BOX – Praveen Prasad Sep 24 '10 at 22:00

score 1 · Accepted Answer · answered Oct 23 '11 at 10:12

1

Ref Nick Craver - Nice solution although it is more felxaible as below

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

By leaving the toggle as a wild card (undefined whichever terminology you prefer) I found it worked more efficiently. Nice though, thanks :)

answered Oct 23 '11 at 10:12

Peter

26
1

This doesn't work more efficiently because it doesn't fit the "work" part under many conditions. Browser caching, clicking before `document.ready`, *or* going back on the same page can leave your toggle in the *opposite* state. Any of those three break the approach in this answer...that's why I have an explicit check for the value. – Nick Craver Oct 25 '11 at 20:22

Ryan Ternier · Answer 4 · 2010-09-24T21:29:38.450

Somthing like (Sorry if there are typos, my coffee isn't made yet).:

 <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 of making this look better, but my coffee is not made. will edit once I get my elixer.

<script>attr('checked','checked')
     $("#fs:checkbox").click(function(){
              if($("#rdYes:checked").attr('checked','checked'))
              {
                 $("#boxReseller").css('display', 'block'); })
              }          
     });
</script>

Unneccesary code: when you click the No radio it will automatically decheck the Yes — Liam Bailey, Sep 24 '10 at 21:26

score 0 · Answer 5 · edited Sep 24 '10 at 21:28

0

$(document).ready(function() {
    $("input[name=solidworks]").change(function() {
        if ($this).val() == "Yes") {
            $("#boxReseller").slideDown('fast');
        }
        else {
            $("#boxReseller").hide('fast');
        }
    })
})

edited Sep 24 '10 at 21:28

Chase Florell

46,378
57
186
376

answered Sep 24 '10 at 21:24

Liam Bailey

5,879
3
34
46

Show box if radio button checked using jQuery

5 Answers5

Linked