首页 > 代码库 > 页面中公用的全选按钮,单选按钮组件的编写

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

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