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

  • 相关阅读:
    记录一些常用的JS属性和语句
    明确前端工作定位
    PHP实现定时执行任务的方法
    经典的阿里前端笔试题
    CSS3 一、文本阴影textshadow属性
    Javascript作用域
    DOM事件探秘
    JavaScript中‘this’关键词的优雅解释
    Sublime Text3 支持Less
    修改table 设置默认值
  • 原文地址:https://www.cnblogs.com/jiangtuzi/p/3758342.html
Copyright © 2011-2022 走看看