在IE8及以下版本时，点击label标签无法自动触发checkbox的click事件，导致无法产生希望的效果。
原HTML代码：
<div> <label><input type="checkbox" value="申请检查">申请检查</label> </div>
$("input:checkbox[name='menu']").each(function (index, element) { $(this).click(function () { if ($(this).attr("checked") != undefined) { $(this).removeAttr("checked"); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.forEach(function (val) { //console.log(element.value); if (element.value == val) { arrMenues.splice($.inArray(val, arrMenues), 1); } }); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); $("#selmenues").val(menues); //console.log($("#selmenues").val()); } } else { $(this).attr("checked", "checked"); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.push($(this).val()); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); } else { menues += $(this).val() + ','; } $("#selmenues").val(menues); //console.log($("#selmenues").val()); } }) });
根本原因：因为ie8不支持事件传递，当点击蓝色的框框时，触发了label的click事件而并没有触发其中checkbox标签的click事件。
解决方式：我们可以修改html代码，将label标签和checkbox标签通过id属性关联，同时给label加上name属性，将事件处理放在label标签上。
新HTML代码：
<div> <label><input type="checkbox" value="申请检查">申请检查</label> </div>
$("label[name='lbl_menu']").each(function (index, element) { $(this).click(function () { //console.log($('input#chk_' + this.id).attr("checked")); if ($('input#chk_' + this.id).attr("checked") != undefined) { $('input#chk_' + this.id).removeAttr("checked"); //$('input#chk_' + this.id).trigger("click"); $('div').filter('.cbr-replaced.cbr-blue').eq(index).removeClass('cbr-checked'); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.forEach(function (val) { //console.log(element.value); if (element.value == val) { arrMenues.splice($.inArray(val, arrMenues), 1); } }); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); $("#selmenues").val(menues); //console.log($("#selmenues").val()); } } else { $('input#chk_' + this.id).attr("checked", "checked"); // console.log($('input#chk_' + this.id).attr("checked")); //$('input#chk_' + this.id).trigger("click"); // console.log($('.cbr-replaced.cbr-blue')[index]); $('div').filter('.cbr-replaced.cbr-blue').eq(index).addClass('cbr-checked'); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.push($('input#chk_' + this.id).val()); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); } else { menues += $('input#chk_' + this.id).val() + ','; } $("#selmenues").val(menues); //console.log($("#selmenues").val()); } }) });
最后加一下IE版本的判断代码就完美了。
完整JS代码
var DEFAULT_VERSION = 8.0; var ua = navigator.userAgent.toLowerCase(); var isIE = ua.indexOf("msie") > -1; var safariVersion; if (isIE) { safariVersion = ua.match(/msie ([\d.]+)/)[1]; } if (safariVersion <= DEFAULT_VERSION) { $("label[name='lbl_menu']").each(function (index, element) { $(this).click(function () { //console.log($('input#chk_' + this.id).attr("checked")); if ($('input#chk_' + this.id).attr("checked") != undefined) { $('input#chk_' + this.id).removeAttr("checked"); //$('input#chk_' + this.id).trigger("click"); $('div').filter('.cbr-replaced.cbr-blue').eq(index).removeClass('cbr-checked'); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.forEach(function (val) { //console.log(element.value); if (element.value == val) { arrMenues.splice($.inArray(val, arrMenues), 1); } }); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); $("#selmenues").val(menues); //console.log($("#selmenues").val()); } } else { $('input#chk_' + this.id).attr("checked", "checked"); // console.log($('input#chk_' + this.id).attr("checked")); //$('input#chk_' + this.id).trigger("click"); // console.log($('.cbr-replaced.cbr-blue')[index]); $('div').filter('.cbr-replaced.cbr-blue').eq(index).addClass('cbr-checked'); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.push($('input#chk_' + this.id).val()); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); } else { menues += $('input#chk_' + this.id).val() + ','; } $("#selmenues").val(menues); //console.log($("#selmenues").val()); } }) }); } else { $("input:checkbox[name='menu']").each(function (index, element) { $(this).click(function () { if ($(this).attr("checked") != undefined) { $(this).removeAttr("checked"); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.forEach(function (val) { //console.log(element.value); if (element.value == val) { arrMenues.splice($.inArray(val, arrMenues), 1); } }); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); $("#selmenues").val(menues); //console.log($("#selmenues").val()); } } else { $(this).attr("checked", "checked"); var menues = $("#selmenues").val(); var arrMenues = menues.split(','); if (arrMenues.length > 0) { arrMenues.push($(this).val()); menues = ""; arrMenues.forEach(function (val) { menues += val + ','; }); menues = menues.substring(0, menues.length - 1) //console.log(menues); } else { menues += $(this).val() + ','; } $("#selmenues").val(menues); //console.log($("#selmenues").val()); } }) }); }
总结