問題描述：
在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 =https://www.cnblogs.com/pzj1023/p/= 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點擊事件JS代碼
根本原因：因為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 =https://www.cnblogs.com/pzj1023/p/= 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 });Label點擊事件JS代碼
最后加一下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 =https://www.cnblogs.com/pzj1023/p/= 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 =https://www.cnblogs.com/pzj1023/p/= 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 }完整JS代碼
初來乍到，這是本人在開發程序中遇到的小問題，簡單總結了一下，分享給請大家，寫的不好請多多見諒，轉載請注明出處，謝謝！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179488.html
標籤：JavaScript
上一篇：什么是跨域？如何解決跨域問題？