Solve the problem that the click event of the checkbox included in the label is not effective and compatible in ie8 and below versions.
Keywords:
Javascript
Attribute
IE
Problem Description:
In IE8 and below versions, clicking the label does not automatically trigger the click event of the checkbox, resulting in the failure to produce the desired effect.
Original HTML code:
1 <div class="col-sm-2">
2 <label><input type="checkbox" id="chk_sqjc" value="Application for inspection" name="menu" class="cbr cbr-blue">Application for inspection</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 click event JS code
Root cause: because ie8 does not support event delivery, when clicking the blue box, the click event of the label is triggered instead of the click event of the checkbox tag.
Solution: we can modify the html code, associate the label and checkbox label with id attribute, add the name attribute to the label, and put the event processing on the label.
New HTML code:
<div class="col-sm-2">
<label name="lbl_menu" id="sqjc"><input type="checkbox" id="chk_sqjc" value="Application for inspection" name="menu" class="cbr cbr-blue">Application for inspection</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 });
JS code of Label click event
Finally, add the judgment code of IE version.
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 }