zoukankan      html  css  js  c++  java
  • jQuery --checkbox全选和取消全选简洁高效的解决办法

      最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下。有问题的话,还望各路大神指导一二。

    html代码如下:

    <fieldset data-role="controlgroup">  
      <label><input type="checkbox" name="boxes" id="select_all" onclick="selectAll();" >全选</label>   <label><input type="checkbox" name="box" onclick="select();" >子选项1</label>   <label><input type="checkbox" name="box" onclick="select();" >子选项2</label>
    </fieldset> 

    jquery代码如下:

    function selectAll(){
         if ($("#select_all").prop("checked")) {  
             $("input[name='box']").prop("checked", true).checkboxradio("refresh");  
         } else {  
             $("input[name='box']").prop("checked", false).checkboxradio("refresh"); 
         }  
    }
    /*如果子项全被选中或者某一个子项被取消,全选项相应的勾选或者全选相应取消勾选*/
    function select(){
          if ($("#select_all").prop("checked")){
              $("input[name='box']").each(function(){
                       if(this.checked == false)
                       {
                               $("input[name='boxes']").prop("checked", false).checkboxradio("refresh");
                       }
               });
          }
          else{
              var n = 0;
              $("input[name='box']").each(function(){
                       if(this.checked == false){
                           n++;
                       }
               });    
               if(!n){
                   $("input[name='boxes']").prop("checked", true).checkboxradio("refresh");
               }
          }
     
    }
  • 相关阅读:
    iOS10 的适配问题,你遇到了吗?导航栏标题和返回按钮神奇的消失了
    如何在获取不到第一响应者控件时移除键盘
    类名与字符串的互转
    clang format 官方文档自定义参数介绍(中英文)
    clang format 自定义样式常用参数说明
    Xcode 设置代码不自动换行
    企业项目如何打包成.ipa文件
    多个过渡动画效果
    压栈过渡动画
    底部不规则导航栏2
  • 原文地址:https://www.cnblogs.com/qifan/p/3793963.html
Copyright © 2011-2022 走看看