解决IE低版本浏览器不兼容label标签的for属性

我这里用到复选框的树形选择问题,由于原生的复选框样式不好看,所以用了图片替换,html中的代码如下

<td>
    <input type="checkbox" id="check" style="display: none;" onclick="ss()"/>
    <label for="check" class="mytext"><img src="img/check.jpg"></label>
</td>

于是在IE中,从IE10以下开始出现了点击没反应的问题,我借鉴了网上的一些东西,再自己加工了一下,以下是成品

 <#--解决IE低版本浏览器不兼容label标签的for属性-->
	function initIE() {
	    if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1){
            var a = document.getElementsByTagName("label");
            for(var i=0;i<a.length;i++){
                if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG"){
                    a[i].childNodes.item(0).forid = a[i].htmlFor;
                    a[i].childNodes.item(0).onclick = function(){
                        var e = document.getElementById(this.forid);
                        switch(e.type){
                            case "checkbox":
                                if ($(e).is(':checked')) {
                                    $(e).prop("checked", false);
                                }else{
                                    $(e).prop("checked", true);
                                }
                                $(e).click();
                                break;
                        }
                        if ($(e).is(':checked')) {
                            $(e).prop("checked", false);
                        }else{
                            $(e).prop("checked", true);
                        }
                    }
                }
            }
        }
	}

这里的复选框我写了两次改变是否选中的代码,原因是我再switch中写了一次以后,再次点击时发现还是未被选中,找了10多分钟没找出来是什么原因,所以我在最后面再次写了一下改变复选框的状态,今天没有过多时间研究为什么,等研究出来再续

猜你喜欢

转载自blog.csdn.net/qq_20594019/article/details/99445838