2011-04-04 63 views
1

鉴于此一主题:使用Javascript/jQuery的:展示基于无线电/选项框隐藏的div选择

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     

回答

0

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

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