Show box if radio button checked using 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开发者_如何学Go="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.

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.

Demo

http://jsfiddle.net/Wpt3Y/

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


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

​

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 :)

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

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>