jq实现全选功能

全选功能事件解析

1.选中全选框 ->全选

2.取消全选框 ->取消全选

3.选中单个选择框 ->是否已经所有单个选择框都选中 ->全选框选中

4.取消单个选择框 ->全选框取消选中

全选事件的代码

//全选事件
$("#check-all").change(function() {
if ($(this).is(':checked')) {
$(".check-order").prop("checked", true);
} else {
$(".check-order").prop("checked", false);
}
});
//单个选中或取消
$(".check-order").change(function() {
//判断是否选中
if ($(this).is(':checked')) {
var isall = true;
$(".check-order").each(function(i, val) {
if (!$(val).is(':checked')) {
isall = false;
}
});
//判断是否已经全选
if (isall) {
$("#check-all").prop("checked", true);
}
} else {
$("#check-all").prop("checked", false);
}
});

代码注意事项

1.jquery判断是否选中是用is(‘:checked’)；

2.改变选择框事件的时候，不要 用 .attr(“checked”, “checked”),用prop(“checked”, true);用attr的话，第一次的选择是有效的，但之后的就没效了。