在多个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中[自定义属性=’属性的值’]或者[自定义属性=属性的值]。这样可以直接选中页面中带有自定义的属性的元素。
自定义属性的使用很有帮助!**