欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-15 15:08:16
问题描述: 在IE8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果。 原HTML代码: 1 $("input:checkbox[name='menu']").each(function (index, element) { 2 $(this).c ......

问题描述:

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题在ie8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果。

 

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

 

 

 原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             });

 

根本原因:因为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             });

最后加一下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         }

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