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

标签：c   style   class   tar   a   使用   

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

页面中公用的全选按钮，单选按钮组件的编写,布布扣,bubuko.com

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

标签：c   style   class   tar   a   使用   

原文地址：http://www.cnblogs.com/jiangtuzi/p/3758342.html