解决包含在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类 from qq
Nov 13 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JavaScript array常用方法代码实例详解
Sep 02 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模板,主要想体现一下思路
2006/12/25 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
js中this对象用法分析
2018/01/05 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
关于美容院的活动方案
2014/08/14 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学校开学标语
2014/10/06 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python