JQuery經過radio，select改變隱藏顯示div

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/qq_36092584/article/details/52740681

1）select下拉框控制div的隱藏與顯示

   
   
   
   
   

   
 
 
    
 
     
 
      
 
     
 
     
 
      

        <script> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       function checkYear() { 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        var selectValue = $( 
       "select[name='periodType']").val(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       if(selectValue == 
       1){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       "#isPeriodYearHalf").hide(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       if(selectValue == 
       2){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       "#isPeriodYearHalf").show(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </script> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <pre name= 
       "code" 
       class= 
       "java"><span>報表類型： 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <select name= 
       "periodType" onchange= 
       "checkYear();"> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <option value= 
       "1">年報</option> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <option value= 
       "2">半年報</option> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </select> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </span> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <span id= 
       "isPeriodYearHalf" style= 
       "display:none">報表半年： 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <select name= 
       "periodYearHalf"> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <option value= 
       "1">上半年</option> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <option value= 
       "2">下半年</option> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </select> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </span> 
      
 
     
 

   

1）radio單選框控制div的隱藏與顯示

   
   
   
   
   
 
 
    
 
     
 
      
 
     
 
     
 
      

        <script> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $(function(){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        var isPermanentValue = $( 
       'input[name="isPermanent"]:checked ').val(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       if(isPermanentValue == 
       1){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       "#validityPeriodTime").hide(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       if(isPermanentValue == 
       0){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       "#validityPeriodTime").show(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       ".merchantzc_radio").click(function(){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        var isPermanentValue = $( 
       'input[name="isPermanent"]:checked ').val(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       if(isPermanentValue == 
       1){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       "#validityPeriodTime").hide(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      
 
       if(isPermanentValue == 
       0){ 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        $( 
       "#validityPeriodTime").show(); 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        } 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        }) 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        }) 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </script> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <pre name= 
       "code" 
       class= 
       "java"><li> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <span>永久有效：</span> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <div> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <div> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <input type= 
       "radio" name= 
       "isPermanent" 
       class= 
       "merchantzc_radio" value= 
       "1">是 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </div> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <div> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        <input type= 
       "radio" name= 
       "isPermanent" checked 
       class= 
       "merchantzc_radio" value= 
       "0">否 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </div> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </div> 
      
 
     
 
 
    
 
     
 
      
 
     
 
     
 
      

        </li>