Javascript / Jquery：根据单选/选项框选择显示隐藏的div

Question

Given this last thread:

Javascript/Jquery: Show a hidden div based on a Radio box select

How do I adapt to make it work for both a radio box and a check box?

Heres my code:

    $(document).ready(function() {
            /* To add more boxes to hide/show, add the name of the field to the array, 
                set the box class to that name + Hide */ 
            // storing the class names of the HTML elements we want to mess with
            var hiddenClassArray = [
                        "appliedWorkedYes",
                        "workStudyYes",
                        "workHistoryYes",
                        "workWeekEndsYes",
                        "cprYes",
                        "aedYes",
                        "aidYes",
                        "lifegaurd",
                        "wsiYes",
                        "gaurdYes",
                        "lifegaurdChk",
                        "fitnessChk",
                        "fitPTCYes",
                        "fitGrpYes",
                        "outdoorAdvChk",
                        "challengeChk",
                        "injuryCareChk",
                        "athTrainYes",
                        "athTrainYesHide"
                        ];  

            // looping over each array element, hiding them using jQuery
            for(var i = 0; i < hiddenClassArray.length; i++){
                // jQuery to append a display none. 
                $("."+hiddenClassArray[i]+"Hide").css("display","none");    
            }

            // ************ RADIO & CHECK BOXES ************

            // Show using toggle 
            $.each(hiddenClassArray, function(index, radio) {

            // first is it a Check box? 
            if($("."+radio).is(':checkbox')) {
                // toggle it then
                $("." + radio).click(function() {
                    $("." + radio + "Hide").toggle('fast');
                });
            } 
            // if it's a radio box
            else if ($("."+radio).is(':radio')) {
                // user clicked something
                $("." + radio).change(function() {   
                    // if it's yes, show
                    if($("."+radio).val()==="Yes") {
                        $("."+radio).show("slow");  
                    }
                    // hide it.
                    else{
                        $("."+radio).hide();
                    }
                }
            }
            }); // end .each
    }); // Ending the $(Doc) Ready                  

Answer 1

At first glance it looks like you simply need to check if the checkbox is checked. And than use that to show or hide your item.

$("." + radio).click(function() {
  $("." + radio + "Hide").toggle('fast', $(this).is(":checked"));
});