解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题 - Go语言中文社区

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

问题描述：

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

 

 

 

 

 原HTML代码：

1  <div class="col-sm-2">
2        <label><input type="checkbox" id="chk_sqjc" value="申请检查" name="menu"  class="cbr cbr-blue">申请检查</label>
3 </div>
 1             $("input:checkbox[name='menu']").each(function (index, element) {
 2                 $(this).click(function () {
 3                     if ($(this).attr("checked") != undefined) {
 4                         $(this).removeAttr("checked");
 5                         var menues = $("#selmenues").val();
 6                         var arrMenues = menues.split(',');
 7                         if (arrMenues.length > 0) {
 8                             arrMenues.forEach(function (val) {
 9                                 //console.log(element.value);
10                                 if (element.value == val) {
11                                     arrMenues.splice($.inArray(val, arrMenues), 1);
12                                 }
13                             });
14                             menues = "";
15                             arrMenues.forEach(function (val) {
16                                 menues += val + ',';
17                             });
18                             menues = menues.substring(0, menues.length - 1)
19                             //console.log(menues);
20                             $("#selmenues").val(menues);
21                             //console.log($("#selmenues").val());
22                         }
23 
24                     } else {
25                         $(this).attr("checked", "checked");
26                         var menues = $("#selmenues").val();
27                         var arrMenues = menues.split(',');
28                         if (arrMenues.length > 0) {
29                             arrMenues.push($(this).val());
30                             menues = "";
31                             arrMenues.forEach(function (val) {
32                                 menues += val + ',';
33                             });
34                             menues = menues.substring(0, menues.length - 1)
35                             //console.log(menues);
36                         }
37                         else {
38                             menues += $(this).val() + ',';
39                         }
40                         $("#selmenues").val(menues);
41                         //console.log($("#selmenues").val());
42                     }
43                 })
44             });
Checkbox点击事件JS代码

 

根本原因：因为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>
 1 $("label[name='lbl_menu']").each(function (index, element) {
 2                 $(this).click(function () {
 3                     //console.log($('input#chk_' + this.id).attr("checked"));
 4                     if ($('input#chk_' + this.id).attr("checked") != undefined) {
 5                         $('input#chk_' + this.id).removeAttr("checked");
 6                         //$('input#chk_' + this.id).trigger("click");
 7                         $('div').filter('.cbr-replaced.cbr-blue').eq(index).removeClass('cbr-checked');
 8                         var menues = $("#selmenues").val();
 9                         var arrMenues = menues.split(',');
10                         if (arrMenues.length > 0) {
11                             arrMenues.forEach(function (val) {
12                                 //console.log(element.value);
13                                 if (element.value == val) {
14                                     arrMenues.splice($.inArray(val, arrMenues), 1);
15                                 }
16                             });
17                             menues = "";
18                             arrMenues.forEach(function (val) {
19                                 menues += val + ',';
20                             });
21                             menues = menues.substring(0, menues.length - 1)
22                             //console.log(menues);
23                             $("#selmenues").val(menues);
24                             //console.log($("#selmenues").val());
25                         }
26 
27                     } else {
28                         $('input#chk_' + this.id).attr("checked", "checked");
29                        // console.log($('input#chk_' + this.id).attr("checked"));
30                         //$('input#chk_' + this.id).trigger("click");
31                        // console.log($('.cbr-replaced.cbr-blue')[index]);
32                         $('div').filter('.cbr-replaced.cbr-blue').eq(index).addClass('cbr-checked');
33                         var menues = $("#selmenues").val();
34                         var arrMenues = menues.split(',');
35                         if (arrMenues.length > 0) {
36                             arrMenues.push($('input#chk_' + this.id).val());
37                             menues = "";
38                             arrMenues.forEach(function (val) {
39                                 menues += val + ',';
40                             });
41                             menues = menues.substring(0, menues.length - 1)
42                             //console.log(menues);
43                         }
44                         else {
45                             menues += $('input#chk_' + this.id).val() + ',';
46                         }
47                         $("#selmenues").val(menues);
48                         //console.log($("#selmenues").val());
49                     }
50                 })
51             });
Label点击事件JS代码

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

  1 var DEFAULT_VERSION = 8.0;
  2         var ua = navigator.userAgent.toLowerCase();
  3         var isIE = ua.indexOf("msie") > -1;
  4         var safariVersion;
  5         if (isIE) {
  6             safariVersion = ua.match(/msie ([d.]+)/)[1];
  7         }
  8         if (safariVersion <= DEFAULT_VERSION) {
  9             $("label[name='lbl_menu']").each(function (index, element) {
 10                 $(this).click(function () {
 11                     //console.log($('input#chk_' + this.id).attr("checked"));
 12                     if ($('input#chk_' + this.id).attr("checked") != undefined) {
 13                         $('input#chk_' + this.id).removeAttr("checked");
 14                         //$('input#chk_' + this.id).trigger("click");
 15                         $('div').filter('.cbr-replaced.cbr-blue').eq(index).removeClass('cbr-checked');
 16                         var menues = $("#selmenues").val();
 17                         var arrMenues = menues.split(',');
 18                         if (arrMenues.length > 0) {
 19                             arrMenues.forEach(function (val) {
 20                                 //console.log(element.value);
 21                                 if (element.value == val) {
 22                                     arrMenues.splice($.inArray(val, arrMenues), 1);
 23                                 }
 24                             });
 25                             menues = "";
 26                             arrMenues.forEach(function (val) {
 27                                 menues += val + ',';
 28                             });
 29                             menues = menues.substring(0, menues.length - 1)
 30                             //console.log(menues);
 31                             $("#selmenues").val(menues);
 32                             //console.log($("#selmenues").val());
 33                         }
 34 
 35                     } else {
 36                         $('input#chk_' + this.id).attr("checked", "checked");
 37                        // console.log($('input#chk_' + this.id).attr("checked"));
 38                         //$('input#chk_' + this.id).trigger("click");
 39                        // console.log($('.cbr-replaced.cbr-blue')[index]);
 40                         $('div').filter('.cbr-replaced.cbr-blue').eq(index).addClass('cbr-checked');
 41                         var menues = $("#selmenues").val();
 42                         var arrMenues = menues.split(',');
 43                         if (arrMenues.length > 0) {
 44                             arrMenues.push($('input#chk_' + this.id).val());
 45                             menues = "";
 46                             arrMenues.forEach(function (val) {
 47                                 menues += val + ',';
 48                             });
 49                             menues = menues.substring(0, menues.length - 1)
 50                             //console.log(menues);
 51                         }
 52                         else {
 53                             menues += $('input#chk_' + this.id).val() + ',';
 54                         }
 55                         $("#selmenues").val(menues);
 56                         //console.log($("#selmenues").val());
 57                     }
 58                 })
 59             });
 60         }
 61         else {
 62             $("input:checkbox[name='menu']").each(function (index, element) {
 63                 $(this).click(function () {
 64                     if ($(this).attr("checked") != undefined) {
 65                         $(this).removeAttr("checked");
 66                         var menues = $("#selmenues").val();
 67                         var arrMenues = menues.split(',');
 68                         if (arrMenues.length > 0) {
 69                             arrMenues.forEach(function (val) {
 70                                 //console.log(element.value);
 71                                 if (element.value == val) {
 72                                     arrMenues.splice($.inArray(val, arrMenues), 1);
 73                                 }
 74                             });
 75                             menues = "";
 76                             arrMenues.forEach(function (val) {
 77                                 menues += val + ',';
 78                             });
 79                             menues = menues.substring(0, menues.length - 1)
 80                             //console.log(menues);
 81                             $("#selmenues").val(menues);
 82                             //console.log($("#selmenues").val());
 83                         }
 84 
 85                     } else {
 86                         $(this).attr("checked", "checked");
 87                         var menues = $("#selmenues").val();
 88                         var arrMenues = menues.split(',');
 89                         if (arrMenues.length > 0) {
 90                             arrMenues.push($(this).val());
 91                             menues = "";
 92                             arrMenues.forEach(function (val) {
 93                                 menues += val + ',';
 94                             });
 95                             menues = menues.substring(0, menues.length - 1)
 96                             //console.log(menues);
 97                         }
 98                         else {
 99                             menues += $(this).val() + ',';
100                         }
101                         $("#selmenues").val(menues);
102                         //console.log($("#selmenues").val());
103                     }
104                 })
105             });
106         }
完整JS代码

初来乍到，这是本人在开发过程中遇到的小问题，简单总结了一下，分享给请大家，写的不好请多多见谅，转载请注明出处，谢谢！！

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/pzj1023/p/11743251.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2019-11-17 12:45:28
  • 阅读 ( 867 )
  • 分类：

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！