呀呼!呀呼! 2022-08-31 15:01 采纳率: 77.3%
浏览 74
已结题

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);都没有,这是为什么?

  • 写回答

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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 9月8日
  • 已采纳回答 8月31日
  • 创建了问题 8月31日

悬赏问题

  • ¥15 微服务假死,一段时间后自动恢复,如何排查处理
  • ¥15 cplex运行后参数报错是为什么
  • ¥15 之前不小心删了pycharm的文件,后面重新安装之后软件打不开了
  • ¥15 vue3获取动态宽度,刷新后动态宽度值为0
  • ¥15 升腾威讯云桌面V2.0.0摄像头问题
  • ¥15 关于Python的会计设计
  • ¥15 聚类分析 设计k-均值算法分类器,对一组二维模式向量进行分类。
  • ¥15 stm32c8t6工程,使用hal库
  • ¥15 找能接spark如图片的,可议价
  • ¥15 博通raid 的写入速度很高也很低