Question

鉴于最后一个帖子：

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

如何使其适用于收音机盒和复选框？

继承我的代码：

    $(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

乍一看，您只需要检查复选框是否已选中。而不是用它来显示或隐藏你的项目。

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

Javascript / Jquery：根据Radio / Option框选择显示隐藏的div

1 个答案: