• 页面中公用的全选按钮,单选按钮组件的编写


    相应的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/>

  • 相关阅读:
    gdb调试
    大数据计算新贵Spark在腾讯雅虎优酷成功应用解析
    推荐系统resys小组线下活动见闻2009-08-22
    从item-base到svd再到rbm,多种Collaborative Filtering(协同过滤算法)从原理到实现
    Nexus设备升级5.0方法
    小议C#错误调试和异常处理
    BMP的图像处理
    一行代码让圆角风雨无阻,告别离屏渲染性能损耗
    推断数组中的反复元素
    HTML5:表格
  • 原文地址:https://www.cnblogs.com/jiangtuzi/p/3758342.html
Copyright © 2020-2023  润新知