js复选框checkbox全选与反选,支持ie5+以及各种浏览器 - javascript学习,js知识点 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> javascript >> js复选框checkbox全选与反选,支持ie5+以及各种浏览器

js复选框checkbox全选与反选,支持ie5+以及各种浏览器

js复选框checkbox全选与反选,支持ie5+以及各种浏览器

先来看看以下几个js函数,用于获取控件集合;

document.getElementById("cbo")              //返回第一个id=cbo的控件
document.getElementsByName("cbo")           //返回name=cbo的控件集合
document.getElementsByClassName("cbo")      //返回class=cbo的控件集合
document.getElementsByTagName("input")      //返回标签名=input的控件集合

全选、全不选、反选功能,使用getElementsByName(xxx)函数获取name=xxx的复选框控件集合

<div>
	<input type="checkbox" name="cbo" /><br />
	<input type="checkbox" name="cbo" /><br />
	<input type="checkbox" name="cbo" /><br />
</div>
<input type="button" value="全选" onclick="CheckAll()"/>
<input type="button" value="不选" onclick="UnCheck()"/>
<input type="button" value="反选" onclick="othercheck()"/>
<script>
	var CheckBox = document.getElementsByName("cbo"); //获取name=cbo的控件集合

	//全选
	function CheckAll(){
		for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=true;};
	};
	 
	//全不选
	function UnCheck(){
		for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=false;};
	};
	 
	//反选
	function othercheck(){
		for(i=0;i<CheckBox.length;i++){
			if(CheckBox[i].checked==true){ CheckBox[i].checked=false;}
			else{ CheckBox[i].checked=true}
		}
	};
</script>

 

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-10-149.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版