解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
程序员文章站
2022-04-21 17:25:24
问题描述： 在IE8及以下版本时，点击label标签无法自动触发checkbox的click事件，导致无法产生希望的效果。 原HTML代码： 1 $("input:checkbox[name='menu']").each(function (index, element) { 2 $(this).c ......
问题描述：
在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 });
根本原因：因为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 }
初来乍到，这是本人在开发过程中遇到的小问题，简单总结了一下，分享给请大家，写的不好请多多见谅，转载请注明出处，谢谢！！
下一篇： 你是不是用我锅洗衣服了？