<script type="text/javascript">
window.onload=function(){
var allselectbox=document.getElementById("allSelect")
var habitsContainer=document.getElementsByName("habit");
allselectbox.onclick=function(){
for(var i=0;ilength ;i++){
habitsContainer[i].checked=allselectbox.checked;
}
}
var count=habitsContainer.length;
var selectcount=0;
for(var i=0;ilength;i++){
habitsContainer[i].onclick=function(){
console.log("click");
for(var i=0;ilength;i++){
console.log("!");
if(habitsContainer[i].checked){
selectcount++;
console.log(selectcount);
}
}
}
}
for(var i=0 ;ilength;i++){
habitsContainer[i].onclick=function(){
if(selectcount==count){
allselectbox.checked=true;
}
else{
allselectbox.checked=false;
}
}
}
}
script>
选择你的爱好：
="checkbox" name="habit" id="habit1" value="watchMovie" />看电影
="checkbox" name="habit" id="habit2" value="easeMusic" />网易云
="checkbox" name="habit" id="habit3" value="lol" />LeagueofLegends
="checkbox" name="habit" id="habit4" value="eatYummyFood" />吃好吃的
="checkbox" name="habit" id="habit5" value="saunter" />逛街
="checkbox" id="allSelect" />全选
运行结果及报错内容 ：
在JS代码第十三行为habit复选框绑定了鼠标单击事件之后的console.log("click");是我用于看是否事件绑定成功的，结果是即使是我点击了这个habit复选框都是控制台还是没有输出click的输出信息。
以及后面的console.log("!");和 console.log(selectcount);都没有，这是为什么？
不要使用循环的方式去绑定事件函数，这么做是不生效的，利用事件委托的方式去做这个功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id='box'>
<input type="checkbox" name="habit" id="habit1" value="watchMovie" />看电影
<input type="checkbox" name="habit" id="habit2" value="easeMusic" />网易云
<input type="checkbox" name="habit" id="habit3" value="lol" />LeagueofLegends
<input type="checkbox" name="habit" id="habit4" value="eatYummyFood" />吃好吃的
<input type="checkbox" name="habit" id="habit5" value="saunter" />逛街
<input type="checkbox" id="allSelect" />全选
</div>
</body>
<!-- <script src='./login/plugin/jquery2.1.1.js'></script> -->
<script type="text/javascript">
window.onload = function() {
let $box = document.getElementById('box')
var allselectbox = document.getElementById("allSelect")
var habitsContainer = document.getElementsByName("habit");
allselectbox.onclick = function() {
for (var i = 0; i < habitsContainer.length; i++) {
habitsContainer[i].checked = allselectbox.checked;
}
}
var count = habitsContainer.length;
var selectcount = 0;
$box.onclick = function(e) {
if(e.target.name && e.target.name == "habit") {
console.log(e.target.checked)
}
}
}
</script>
</html>
可以看下控制台有没有报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta charset="UTF-8">
</head>
<body>
选择你的爱好：
<input type="checkbox" name="habit" id="habit1" value="watchMovie" />看电影
<input type="checkbox" name="habit" id="habit2" value="easeMusic" />网易云
<input type="checkbox" name="habit" id="habit3" value="lol" />LeagueofLegends
<input type="checkbox" name="habit" id="habit4" value="eatYummyFood" />吃好吃的
<input type="checkbox" name="habit" id="habit5" value="saunter" />逛街
<input type="checkbox" id="allSelect" />全选
<script type="text/javascript">
window.onload = function () {
var allselectbox = document.getElementById("allSelect")
var habitsContainer = document.getElementsByName("habit");
allselectbox.onclick = function () {
for (var i = 0; i < habitsContainer.length; i++) {
habitsContainer[i].checked = allselectbox.checked;
}
if(allselectbox.checked){
selectcount = 5;
}else {
selectcount = 0;
}
}
var count = habitsContainer.length;
var selectcount = 0;
for (var i = 0; i < count; i++) {
habitsContainer[i].index = i;
habitsContainer[i].onclick = function () {
// console.log(this.index, 'click');
console.log(habitsContainer[this.index].checked);
if (habitsContainer[this.index].checked) {
selectcount++;
console.log(selectcount,count);
}else {
selectcount --;
if(selectcount < 0) {
selectcount = 0;
}
console.log(selectcount,count);
}
if (selectcount == count) {
allselectbox.checked = true;
}
else {
allselectbox.checked = false;
}
}
}
}
</script>
</body>
</html>