解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题


Posted in Javascript onOctober 27, 2019

问题描述:

在IE8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果。

 原HTML代码:

<div class="col-sm-2">
    <label><input type="checkbox" id="chk_sqjc" value="申请检查" name="menu" class="cbr cbr-blue">申请检查</label>
 </div>
$("input:checkbox[name='menu']").each(function (index, element) {
        $(this).click(function () {
          if ($(this).attr("checked") != undefined) {
            $(this).removeAttr("checked");
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $("#selmenues").val(menues);
              //console.log($("#selmenues").val());
            }

          } else {
            $(this).attr("checked", "checked");
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.push($(this).val());
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $(this).val() + ',';
            }
            $("#selmenues").val(menues);
            //console.log($("#selmenues").val());
          }
        })
      });

根本原因:因为ie8不支持事件传递,当点击蓝色的框框时,触发了label的click事件而并没有触发其中checkbox标签的click事件。

解决方式:我们可以修改html代码,将label标签和checkbox标签通过id属性关联,同时给label加上name属性,将事件处理放在label标签上。

新HTML代码:

<div class="col-sm-2">
   <label name="lbl_menu" id="sqjc"><input type="checkbox" id="chk_sqjc" value="申请检查" name="menu" class="cbr cbr-blue">申请检查</label>
</div>
$("label[name='lbl_menu']").each(function (index, element) {
        $(this).click(function () {
          //console.log($('input#chk_' + this.id).attr("checked"));
          if ($('input#chk_' + this.id).attr("checked") != undefined) {
            $('input#chk_' + this.id).removeAttr("checked");
            //$('input#chk_' + this.id).trigger("click");
            $('div').filter('.cbr-replaced.cbr-blue').eq(index).removeClass('cbr-checked');
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $("#selmenues").val(menues);
              //console.log($("#selmenues").val());
            }
          } else {
            $('input#chk_' + this.id).attr("checked", "checked");
            // console.log($('input#chk_' + this.id).attr("checked"));
            //$('input#chk_' + this.id).trigger("click");
            // console.log($('.cbr-replaced.cbr-blue')[index]);
            $('div').filter('.cbr-replaced.cbr-blue').eq(index).addClass('cbr-checked');
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.push($('input#chk_' + this.id).val());
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $('input#chk_' + this.id).val() + ',';
            }
            $("#selmenues").val(menues);
            //console.log($("#selmenues").val());
          }
        })
      });

最后加一下IE版本的判断代码就完美了。

 完整JS代码

var DEFAULT_VERSION = 8.0;
    var ua = navigator.userAgent.toLowerCase();
    var isIE = ua.indexOf("msie") > -1;
    var safariVersion;
    if (isIE) {
      safariVersion = ua.match(/msie ([\d.]+)/)[1];
    }
    if (safariVersion <= DEFAULT_VERSION) {
      $("label[name='lbl_menu']").each(function (index, element) {
        $(this).click(function () {
          //console.log($('input#chk_' + this.id).attr("checked"));
          if ($('input#chk_' + this.id).attr("checked") != undefined) {
            $('input#chk_' + this.id).removeAttr("checked");
            //$('input#chk_' + this.id).trigger("click");
            $('div').filter('.cbr-replaced.cbr-blue').eq(index).removeClass('cbr-checked');
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $("#selmenues").val(menues);
              //console.log($("#selmenues").val());
            }
          } else {
            $('input#chk_' + this.id).attr("checked", "checked");
            // console.log($('input#chk_' + this.id).attr("checked"));
            //$('input#chk_' + this.id).trigger("click");
            // console.log($('.cbr-replaced.cbr-blue')[index]);
            $('div').filter('.cbr-replaced.cbr-blue').eq(index).addClass('cbr-checked');
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.push($('input#chk_' + this.id).val());
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $('input#chk_' + this.id).val() + ',';
            }
            $("#selmenues").val(menues);
            //console.log($("#selmenues").val());
          }
        })
      });
    }
    else {
      $("input:checkbox[name='menu']").each(function (index, element) {
        $(this).click(function () {
          if ($(this).attr("checked") != undefined) {
            $(this).removeAttr("checked");
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $("#selmenues").val(menues);
              //console.log($("#selmenues").val());
            }
          } else {
            $(this).attr("checked", "checked");
            var menues = $("#selmenues").val();
            var arrMenues = menues.split(',');
            if (arrMenues.length > 0) {
              arrMenues.push($(this).val());
              menues = "";
              arrMenues.forEach(function (val) {
                menues += val + ',';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $(this).val() + ',';
            }
            $("#selmenues").val(menues);
            //console.log($("#selmenues").val());
          }
        })
      });
    }

总结

以上所述是小编给大家介绍的解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
javascript实现滚动条效果
Mar 24 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
VUE兄弟组件传值操作实例分析
Oct 26 #Javascript
layui实现给某一列加点击事件
Oct 26 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php 获取全局变量的代码
2011/04/21 PHP
php中的比较运算符详解
2013/10/28 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
javascript操作cookie
2017/01/17 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python面向对象编程基础解析(二)
2017/10/26 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
使用Python函数进行模块化的实现
2019/11/15 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python——全排列数的生成方式
2020/02/26 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
生物技术专业毕业生求职信范文
2013/12/14 职场文书
优秀村官事迹材料
2014/01/10 职场文书
明星员工获奖感言
2014/08/14 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js