解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
问题描述:
在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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。