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/>

  • 相关阅读:
    ORA-06553:PLS-306:wrong number or types of arguments in call to ''
    ORA-06577:output parameter not a bind variable
    CSS3之边框属性border
    Linux_LAMP 最强大的动态网站解决方案
    Linux_LAMP 最强大的动态网站解决方案
    Field BSEG-MWSKZ . does not exist in the screen SAPMF05A 0300 Message no. 00349
    mysql group by
    perl 解析JSON
    数组的数组 散列的散列
    HTTP Cookies
  • 原文地址:https://www.cnblogs.com/jiangtuzi/p/3758342.html
Copyright © 2011-2022 走看看