zoukankan      html  css  js  c++  java
  • 页面中公用的全选按钮,单选按钮组件的编写

    相应的js代码为:

       var checkAll = $("[data-checkbox-checkall]");

      //遍历处理每一组的情况

      checkAll.each(function(){

            var groupName = $(this).attr("data-checkbox-group");

            startCheck(groupName);

      });

    function startCheck(groupName){

    //所有的该组元素

         var allCheckbox = $("[data-checkbox-group='"+groupName+"']");

         var oneCheck = allCheckbox.filter("[data-checkbox-checkall]");

         var otherCheckbox = allCheckbox.not("[data-checkbox-checkall]");

         oneCheck.click(function(){

              otherCheckbox.prop("checked", this.checked );

         });

         otherCheckbox.click(function(){

              oneCheck.prop('checked',otherCheckbox.length==otherCheckbox.filter(':checked').length);

         });

    }

     <!--全选个单选按钮的使用方法-->

           <p style="margin-top:50px">(七)全选按钮和单选按钮</p></br>

           <p>(1)给改组的元素上面加上加上 data-checkbox-group="one" 属性(注意不同的组的data-checkbox-group="**",要设置不一样; 比如 one two 之类的;)</p>

           <p>(2)给全选的按钮上加上 data-checkbox-checkall</p></br>

      第一组:    

           <div class=""><input type="checkbox" data-checkbox-group="two" data-checkbox-checkall/>第二组全选/单选</div>

           <input type="checkbox" data-checkbox-group="two"/>

           <input type="checkbox" data-checkbox-group="two"/>

           <input type="checkbox" data-checkbox-group="two"/>

           <input type="checkbox" data-checkbox-group="two"/><br/><br/>

      第二组:

           <div class=""><input type="checkbox" data-checkbox-group="three" data-checkbox-checkall/>第三组全选</div>

           <input type="checkbox" data-checkbox-group="three"/>

           <input type="checkbox" data-checkbox-group="three"/>

           <input type="checkbox" data-checkbox-group="three"/>

           <input type="checkbox" data-checkbox-group="three"/><br/>

  • 相关阅读:
    css3 的box-sizing属性理解
    web自定义炫酷字体
    Canvas rontate(旋转) 使用误区
    HTM5 之 Canvas save 、restore 恢复画布状态的理解
    Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说
    关于EF的一点小记录
    IIS 发布webservice 需要用户名和密码访问 解决
    【算法笔记】A1060 Are They Equal
    【算法笔记】A1063 Set Similarity
    【算法笔记】B1052 卖个萌
  • 原文地址:https://www.cnblogs.com/jiangtuzi/p/3758342.html
Copyright © 2011-2022 走看看