本文提供了一段兼容IE和Firefox浏览器的JavaScript代码,用于实现网页中复选框的全选与反选功能。通过遍历表单元素并判断类型,动态修改checked属性,确保在不同浏览器环境下均能正常执行。
兼容IE与Firefox的JS复选框全选及反选实现
针对用户反馈的兼容性问题,经过调试,现提供一个适用于IE和Firefox浏览器的兼容版本。
具体实现代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script language="javascript">
function selectIt(action){
var testform=document.getElementById("bdkey");
for(var i=0 ;i<testform.elements.length;i++){
if(testform.elements[i].type=="checkbox"){
e=testform.elements[i];
e.checked=(action=="selectAll")?1:(!e.checked);
}
}
}
</script>
</head>
<body>
<form name="bdkey" id="bdkey">
<p class="STYLE1">
全 选
<input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt('selectAll')"><br>
反 选
<input type="checkbox" name="invest" value="checkbox" onClick="selectIt()"><br>
Item1
<input type="checkbox" name="checkbox" value="checkbox">
<br>
Item2
<input type="checkbox" name="checkbox" value="checkbox"><br>
Item3
<input type="checkbox" name="checkbox" value="checkbox"><br>
Item4
<input type="checkbox" name="checkbox" value="checkbox"><br>
Item5
<input type="checkbox" name="checkbox" value="checkbox">
</p>
</form>
</body><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> </head> <body> </body>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
在兼容性测试初期,曾尝试使用经典的通过ev.srcElement获取事件源的方法,但未调试成功。最终采用的这种看似简单直接的方式,虽然不够“高深”,但被证明是最有效且稳定的解决方案。