JS鼠标单击事件绑定失败？

问题相关代码，请勿粘贴截图

<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;
                }
                }
                var count=habitsContainer.length;
                var selectcount=0;
                for(var i=0;i<habitsContainer.length;i++){
                habitsContainer[i].onclick=function(){
                    console.log("click");
                    for(var i=0;i<habitsContainer.length;i++){
                        console.log("!");
                    if(habitsContainer[i].checked){
                        selectcount++;
                        console.log(selectcount);
                    }
                    }
                }
                }
                    for(var i=0 ;i<habitsContainer.length;i++){
                        habitsContainer[i].onclick=function(){
                            if(selectcount==count){
                                allselectbox.checked=true;
                            }
                            else{
                                allselectbox.checked=false;
                            }
                        }
                    }
            }
        </script>

选择你的爱好：

        <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" />全选

运行结果及报错内容：
在JS代码第十三行为habit复选框绑定了鼠标单击事件之后的console.log("click");是我用于看是否事件绑定成功的，结果是即使是我点击了这个habit复选框都是控制台还是没有输出click的输出信息。
以及后面的console.log("!");和 console.log(selectcount);都没有，这是为什么？

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

雾里桃花 2022-08-31 15:14

关注

不要使用循环的方式去绑定事件函数，这么做是不生效的，利用事件委托的方式去做这个功能

<!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>