jQuery method for hiding a div upon checking another radio button

Question

I'm using the code, below, to show or hide a div upon the pseudoclass ":checked" added to an input (in my case checkboxes and radio buttons). Currently, it works perfectly with the checkboxes (the showing/hiding of the div toggles correctly) however, once clicking a radio button, the div will show, but will not hide when clicking on a different radio button.

Here's a JSFiddle link.

jQuery:

    $(document).ready(function(){
        // Hide hospitalInfo DIV
        $("#hospitalInfo").css("display","none");
        // Add onclick handler to checkbox w/id checkme
        $(".hospCheck").click(function(){
            // If checked
            if ($(".hospCheck").is(":checked")) {
                //show the hidden div
                $("#hospitalInfo").show("fast");
            } else {
                //otherwise, hide it
                $("#hospitalInfo").hide("fast");
            }
        });
    });

Here is the HTML:

    <input type="radio" name="ini_disposition" value="H" class="hospCheck" />
    <input type="radio" name="ini_disposition" value="S" />
    <input type="radio" name="ini_disposition" value="T" />

    <input type="checkbox"  class="hospCheck" name="er" value="Y">
    <input type="checkbox"  class="hospCheck" name="er" value="N">
    <div id="hospitalInfo">
      Text I want to hide or show.
    </div>

Any insight is appreciated!

Answer 1

Inside of the click function, don't you want to reference $(this) instead of $(".hospCheck")? This would then reference the specific radio button that was clicked on.

EDIT: Does this fiddle do what you want? http://jsfiddle.net/kvyZa/

$(document).ready(function(){
    // Hide hospitalInfo DIV
    $("#hospitalInfo").css("display","none");
    // Add onclick handler to checkbox w/id checkme
    $(".hospCheck").click(function(){
        // If checked
        if ($(".hospCheck").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck1").click(function(){
        // If checked
        if ($(".hospCheck1").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck2").click(function(){
          $("#hospitalInfo").hide("fast");
    });
});

EDIT 2: Try this fiddle: http://jsfiddle.net/5Aevs/

    $(document).ready(function(){
    // Hide hospitalInfo DIV
    $("#hospitalInfo").css("display","none");
    // Add onclick handler to checkbox w/id checkme
    $(".hospCheck").click(function(){
        // If checked
        if ($(".hospCheck").is(":checked") || $(".hospCheck1").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck1").click(function(){
        // If checked
        if ($(".hospCheck").is(":checked") || $(".hospCheck1").is(":checked")) {
            //show the hidden div
            $("#hospitalInfo").show("fast");
        } else {
            //otherwise, hide it
            $("#hospitalInfo").hide("fast");
        }
    });
    $(".hospCheck2").click(function(){
          $("#hospitalInfo").hide("fast");
    });
});