用原生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，所以要寫個循環一個節點一個節點綁定。