浏览器中js的兼容性使用记录-优快云博客

本文链接：https://blog.youkuaiyun.com/studingsea/article/details/83610695

本文深入探讨了在Web开发中处理具有相同name和id属性的复选框时，如何实现全选复选框功能，并提供了一种改进的HTML结构以增强跨浏览器兼容性。通过实例代码演示了不同浏览器的行为差异，以及如何通过修改HTML结构来解决IE的误识别问题，确保功能在主流浏览器中稳定运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
				}
			}
		}
	}