js 实现全选反选
最近在做一个js特效:全选,反选。
效果能实现,可是只执行了一次。多次点击,发现效果不能触发了。后来查了些文档,才了解是 attr 跟 prop 的区别!
代码直接贴出来:
($("#全选ID").attr("checked") 的返回值 就是 true/false )
attr只能运行一次:
function checked_all(){
$("input[name='XXX']:checkbox").each(function(){
$(this).attr("checked",$("#全选ID").attr("checked"));
});
}
prop可以实现多次点击:
function checked_all(){
$("input[name='XXX']:checkbox").each(function(){
$(this).prop("checked",$("#全选ID").prop("checked"));
});
}
html 如下:
<input type="checkbox" id="all_checkboxes" onclick = "checked_all();">全选
完整 全选/反选 (可通过控制下面的checkbox 反过来控制 全选按钮是否改变)
全选按钮的id :all_users;
子checkbox的name :users_id;
function checked_all(){
$("input[name='users_id']:checkbox").each(function(){
$(this).prop("checked",$("#all_users").prop("checked"));
});
}
//全选按钮是否被选中
function change_checked(){
var coll = document.getElementsByName('users_id');
var collid = document.getElementById('all_users');
var m = 0;
for(var i = 0; i < coll.length; i++){
if(coll[i].checked == true){
m++ ;
}
else{
collid.checked = false;
}
}
//查看是否全部被选中
if(m == coll.length){
collid.checked = true;
}
}
html代码
<table >
<tr>
<td ><input type="checkbox" name="all_users" id="all_users" onclick = "checked_all();">全选</td>
</tr>
<tr>
<td ><input type="checkbox" name="users_id" onclick = "change_checked();">子checkbox</td>
</tr>
</table>