<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML复选框的全选和取消全选</title>
</head>
<body onload="bindClick()">
<script>
// function checkAll() {
// var firstCheck = document.getElementById("firstCheck");
// console.log(firstCheck)
// //获取选中状态
// console.log(firstCheck.checked)
// var aihaos = document.getElementsByName("aihao")
// if (firstCheck.checked) {
// //全选
// for (var i = 0; i < aihaos.length; i++) {
// aihaos[i].checked = true
// }
// } else {
// for (var i = 0; i < aihaos.length; i++) {
// aihaos[i].checked = false
// }
// }
// }
function checkAll() {
var firstCheck = document.getElementById("firstCheck")
var aihaos = document.getElementsByName("aihao")
for (var i = 0; i < aihaos.length; i++) {
aihaos[i].checked = firstCheck.checked
}
}
//页面加载完成之后,为每个name是aihao的checkbox都绑定了点击事件
function bindClick() {
var aihaos = document.getElementsByName("aihao")
console.log(aihaos.length)
for (var i = 0; i < aihaos.length; i++) {
aihaos[i].onclick = function () {//这样就为每个name是aihao的checkbox都绑定了点击事件
var count = aihaos.length
var checkNum = 0
for (var i = 0; i < aihaos.length; i++) {
if (aihaos[i].checked) {
checkNum++;
}
}
if (checkNum == count) {
document.getElementById("firstCheck").checked = true;
} else {
document.getElementById("firstCheck").checked = false;
}
}
}
}
</script>
<input type="checkbox" id="firstCheck" onclick="checkAll()" />全选<br>
<input type="checkbox" name="aihao" value="0" />抽烟<br>
<input type="checkbox" name="aihao" value="1" />喝酒<br>
<input type="checkbox" name="aihao" value="2" />烫头<br>
<input type="checkbox" name="aihao" value="3" />跳舞<br>
<input type="checkbox" name="aihao" value="4" />唱歌<br>
<input type="checkbox" name="aihao" value="5" />睡觉<br>
<input type="checkbox" name="aihao" value="6" />打豆豆<br>
</body>
</html>
复选框全选和取消全选demo
biubiubiu07062024-08-26 12:59
相关推荐
打不着的大喇叭6 分钟前
uniapp的光标跟随和打字机效果liulilittle11 分钟前
C++ i386/AMD64平台汇编指令对齐长度获取实现无我Code11 分钟前
2025----前端个人年中总结程序猿阿伟13 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》Sun_light29 分钟前
6个你必须掌握的「React Hooks」实用技巧✨爱学习的茄子32 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南莫空000032 分钟前
Vue组件通信方式详解呆呆的心33 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨百锦再33 分钟前
重新学习Vue中的按键监听和鼠标监听susnm37 分钟前
Dioxus 与数据库协作