解决包含在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实现打开本地文件或文件夹
Mar 09 Javascript
最近项目写了一些js,水平有待提高
Jan 31 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
js中top的作用深入剖析
Mar 04 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
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/11/06 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Python collections模块实例讲解
2014/04/07 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
django中瀑布流写法实例代码
2019/10/14 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
网络教育自我鉴定
2014/02/04 职场文书
调解员先进事迹材料
2014/02/07 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2016教师节感恩话语
2015/12/09 职场文书