溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題描述：
在IE8及以下版本時，點擊label標簽無法自動觸發checkbox的click事件，導致無法產生希望的效果。
原HTML代碼：
<div class="col-sm-2">
<label><input type="checkbox" id="chk_sqjc" value="申請檢查" name="menu" class="cbr cbr-blue">申請檢查</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 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>
$("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());
}
})
});
}
總結
以上所述是小編給大家介紹的解決包含在label標簽下的checkbox在ie8及以下版本點擊事件無效果兼容的問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
