解决包含在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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
JS+html5制作简单音乐播放器
Sep 13 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 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
PHP编码规范的深入探讨
2013/06/06 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jquery实现的网页自动播放声音
2014/04/30 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
初探nodeJS
2017/01/24 NodeJs
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Python实现字典的key和values的交换
2015/08/04 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python hmac模块使用实例解析
2019/12/24 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Django权限设置及验证方式
2020/05/13 Python
python 实现两个npy档案合并
2020/07/01 Python
深入了解NumPy 高级索引
2020/07/24 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
承办会议欢迎词
2014/01/17 职场文书
小摄影师教学反思
2014/04/27 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
聘任书的格式及模板
2019/10/28 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android