解决包含在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 ......
问题描述:
在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 }
初来乍到,这是本人在开发过程中遇到的小问题,简单总结了一下,分享给请大家,写的不好请多多见谅,转载请注明出处,谢谢!!