浏览器中js的兼容性使用记录

 

1、web中经常用到全选复选框操作，在具有多个相同name和id的checkbox中写出兼容的js代码，实践中经验如下：

 

HTML:

 

 

<input type=”checkbox” name=”check_order” id=”check_order”/>

<input type=”checkbox” name=”check_order” id=”check_ order”/>

<input type=”checkbox” name=”check_order” id=”check_ order”/>

<input type=”checkbox” name=”check_order” id=”check_ order”/>  

 

javascript：

//这种方式只有ie支持，所以要舍去 

var check_orders = document.all. check_order; 



//这种方式才是标准的 

Var check_orders = document.getElementsByName(“check_order") 

 

 

但是变态的IE不止会把名称为check_order的算入，而且还把id为check_order的也算入，但是chrome不会出现这种情况(foxfire也许也不会，没装所以没测)，所以为了更好的兼容性，如果具有相同的name元素，必须把name 和id 改成不同的名称，所以上面的html代码应改为

 

<input type=”checkbox” name=”check_order” id=”check_orderID”/>

<input type=”checkbox” name=”check_order” id=”check_ orderID”/>

<input type=”checkbox” name=”check_order” id=”check_ orderID”/>

<input type=”checkbox” name=”check_order” id=”check_ orderID”/>  

 

完整的代码：

	function checkAllFun(checkObj){
		var check_orders = document.getElementsByName("check_order");
		if(check_orders.length!=0){
			if(checkObj.checked){
				for(var i=0;i<check_orders.length;i++){
					if(!check_orders[i].checked&&!check_orders[i].disabled)check_orders[i].checked=true;
				}
			}else{
				for(var i=0;i<check_orders.length;i++){
					if(check_orders[i].checked&&!check_orders[i].disabled)check_orders[i].checked=false;
				}
			}
		}
	}