checkbox全选与反选
用原生js跟jquery实现checkbox全选反选的一个例子
原生js：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
</head>
<body>
<div id="check-all">
<input type="checkbox" name="check-all">全选
</div>
<div id="sub-checkbox">
<input type="checkbox" name="sub-checkbox">
<input type="checkbox" name="sub-checkbox">
<input type="checkbox" name="sub-checkbox">
<input type="checkbox" name="sub-checkbox">
<input type="checkbox" name="sub-checkbox">
</div>
<script>
var checkAll = document.querySelector('[name=check-all]');
var subCheckbox = document.querySelectorAll('[name=sub-checkbox]');
//绑定全选、反选事件
checkAll.addEventListener('change', function () {
if (this.checked) {
for (var i = 0; i < subCheckbox.length; i++) {
subCheckbox[i].checked = true;
}
} else {
for (var i = 0; i < subCheckbox.length; i++) {
subCheckbox[i].checked = false;
}
}
}, false);
//绑定sub checkbox的事件
for (var i = 0; i < subCheckbox.length; i++) {
subCheckbox[i].addEventListener('change', function () {
var checkboxnum = subCheckbox.length;
var checked = document.querySelectorAll('[name=sub-checkbox]:checked').length;
if (checkboxnum == checked) { //如果选中的sub checkbox与全部的sub checkbox一样多，则勾选全选的checkbox
checkAll.checked = true;
} else { //反之取消勾选
checkAll.checked = false;
}
}, false);
}
</script>
</body>
</html>
$(document).ready(function () {
//checkbox select all
$(document).on('change', '[name=check-all]', function () {
if ($(this).prop('checked')) {
$('[name=sub-checkbox]').prop('checked', true);
} else {
$('[name=sub-checkbox]').prop('checked', false);
}
});
//sub checkbox
$(document).on('change', '[name=sub-checkbox]', function () {
var checkboxnum = $('[name=sub-checkbox]').length;
var checked = $('[name=sub-checkbox]:checked').length;
if (checkboxnum == checked) {
$('[name=check-all]').prop('checked', true);
} else {
$('[name=check-all]').prop('checked', false);
}
});
});
需要注意的是jquery中获取checkbox勾选状态时用prop()，不用attr()。
绑定事件 由于querySelectorAll()返回的是一个NodeList，所以要写个循环一个节点一个节点绑定。
