2011-04-04 60 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")); 
});