问题描述：
在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 }
初来乍到，这是本人在开发过程中遇到的小问题，简单总结了一下，分享给请大家，写的不好请多多见谅，转载请注明出处，谢谢！！
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论