多个checkbox全选和获取已选择的checkbox的demo以及自定义属性的使用

在多个checkbox存在的时候，做个全选的checkbox。只要这个checkbox选中那么其他的checkbox自动被选中。然后获取被选中的checkbox。
这个过程中需要自定义一个属性来区别checkbox，并利用自定义的属性来获取需要的值。
代码如下：
html代码：

<div>
    全选:<input type="checkbox" name="checkAll" checkAll = "check_single" /><br/>
    <button checkboxbtn >获取选中元素</button><br/>
    单选1：<input type="checkbox" check_single value='1'/><br/>
    单选2：<input type="checkbox" check_single value='2'/><br/>
    单选3：<input type="checkbox" check_single value='3'/><br/>
    单选4：<input type="checkbox" check_single value='4'/><br/>
    单选5：<input type="checkbox" check_single value='5'/><br/>
</div>

在一个div中有一个全选的checkbox，在它身上自定义了一个属性checkAll 值为 “check_single”。只要后续的checkbox上有 check_single属性就会被全选checkbox控制。
点击带有checkboxbtn属性的按钮就可以获取到已被选中的checkbox的值。
js代码如下：

$(document).ready(function(){
        var check_single;
        $("[type=checkbox][name=checkAll][checkAll]").on('click',function(){
            check_single = $(this).attr('checkAll');
            var check = $(this).attr('checked');
            if(check =='checked')
            {
            //如果全选的checkbox被选中了则带有check_single属性的checkbox会被自动选中
            $("[type=checkbox]["+check_single+"]").each(function(){
$(this).attr('checked',true);//将带有heck_single属性的checkbox的状态切换为选中状态
                });
        });
            }
            else
            {
            //如果全选的checkbox没有被选中了则带有check_single属性的checkbox会自动被取消选中
                $("[type=checkbox]["+check_single+"]").each(function(){
            $(this).attr('checked',false);//将带有heck_single属性的checkbox的状态切换为不选中状态
            });
            }
        });

        $("button[checkboxbtn]").on('click',function(){
        //如果带有checkboxbtn属性的按钮被点击则获取选中状态的checkbox的值
        var data=[];
            $("[type=checkbox]["+check_single+"]").each(function(){
            if($(this).attr('checked')=='checked')
            {
            //获取被选中的checkbox的值
              data.push($(this).val()) ;
            }
}）;
            console.log(data);
});
});

经过运行可以得到本文介绍的效果！
**
在提取多个被选中的checkbox的值时，用自定义属性可以很好的解决问题。
jq中[自定义属性=’属性的值’]或者[自定义属性=属性的值]。这样可以直接选中页面中带有自定义的属性的元素。
自定义属性的使用很有帮助！**