【问题标题】:Javascript/Jquery: Show a hidden div based on a Radio/Option box selectJavascript/Jquery:基于单选/选项框选择显示隐藏的 div
【发布时间】:2011-04-05 02:45:26
【问题描述】:

鉴于这最后一个线程:

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                  

【问题讨论】:

    标签: javascript jquery checkbox radio-button


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-06-13
      • 1970-01-01
      相关资源
      最近更新 更多