解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

2023-08-10 08:43:04 343

问题描述：

在IE8及以下版本时，点击label标签无法自动触发checkbox的click事件，导致无法产生希望的效果。

原HTML代码：


申请检查

$("input:checkbox[name='menu']").each(function(index,element){
$(this).click(function(){
if($(this).attr("checked")!=undefined){
$(this).removeAttr("checked");
varmenues=$("#selmenues").val();
vararrMenues=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");
varmenues=$("#selmenues").val();
vararrMenues=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代码：


申请检查

$("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');
varmenues=$("#selmenues").val();
vararrMenues=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');
varmenues=$("#selmenues").val();
vararrMenues=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代码

varDEFAULT_VERSION=8.0;
varua=navigator.userAgent.toLowerCase();
varisIE=ua.indexOf("msie")>-1;
varsafariVersion;
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');
varmenues=$("#selmenues").val();
vararrMenues=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');
varmenues=$("#selmenues").val();
vararrMenues=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");
varmenues=$("#selmenues").val();
vararrMenues=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");
varmenues=$("#selmenues").val();
vararrMenues=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及以下版本点击事件无效果兼容的问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

热门推荐

随机推荐