呀呼!呀呼! 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 k210烧入flash报错error:2005
  • ¥15 GIS土地利用预测FLUS模型
  • ¥15 visual studio code打不出来中文双引号
  • ¥20 关于#matlab#的问题:ps:完美符合要求有打赏(相关搜索:自适应)
  • ¥15 声音感应灯,问题出在哪里
  • ¥15 关于#matlab#的问题:(0,0)上的贝塞尔曲线,0)上的贝塞尔曲线,并使用自适应积分计算其从t=0到不大于1的任意值区间的弧长
  • ¥20 关于#r语言#rda分析作图的问题,请各位专家解答!
  • ¥50 找回 股票行情系统的资源问题
  • ¥15 gwas 分析-plink 检查人口分层出现下面问题
  • ¥15 关于#matlab#的问题:需要 MATLAB 运行程序,对比四个多址通信方式(TDMA,FDMA,CDMA,OFDMA)的抗噪声性能