PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    hbuilder mui 全选和取消以及全选按钮代码案例

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:hbuilder mui 全选和取消以及全选按钮代码案例
    1. <div class="mui-content"> 
    2.  
    3.                 <form class="mui-input-group"> 
    4.                     <div class="mui-input-row mui-checkbox"> 
    5.                         <label>全部</label> 
    6.                         <input id="selectall"  type="checkbox"> 
    7.                     </div> 
    8.                     <div class="mui-input-row mui-checkbox"> 
    9.                         <label>四年级一班</label> 
    10.                         <input name="subcheck"  type="checkbox"> 
    11.                     </div> 
    12.                     <div class="mui-input-row mui-checkbox"> 
    13.                         <label>四年级二班</label> 
    14.                         <input name="subcheck"  type="checkbox"> 
    15.                     </div> 
    16.                     <div class="mui-input-row mui-checkbox"> 
    17.                         <label>四年级三班</label> 
    18.                         <input name="subcheck"  type="checkbox"> 
    19.                     </div> 
    20.                 </form> 
    21.             </div> 
    22.  
    23. <script type="text/javascript"> 
    24.         var chkall=document.getElementById("selectall"); 
    25.         mui.plusReady(function(){ 
    26.             chkall.addEventListener("change",function(){ 
    27.                 if(this.checked){ 
    28.                     mui("input[name='subcheck']").each(function(){ 
    29.                         this.checked=true
    30.  
    31.                     }); 
    32.                 }else{ 
    33.                     mui("input[name='subcheck']").each(function(){ 
    34.                         this.checked=false
    35.  
    36.                     }); 
    37.                 } 
    38.             },false); 
    39.  
    40.             var cbknum=mui("input[name='subcheck']").length; 
    41.              var chknum=0;     
    42.             mui(".mui-input-group").on("change","input[name='subcheck']",function(){ 
    43.  
    44.                 if(this.checked) 
    45.                 { 
    46.                     chknum++; 
    47.  
    48.                 }else{ 
    49.                     chknum--; 
    50.                 } 
    51.                 if(cbknum==chknum){ 
    52.  
    53.                     chkall.checked=true
    54.                 }else{ 
    55.                     chkall.checked=false
    56.  
    57.                 } 
    58.  
    59.             }); 
    60.  
    61.  
    62.         }); 
    63. </script> 

     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-3503-1.html
    相关热词搜索: