复选框全选、全不选和反选的效果实现

最新推荐文章于 2022-04-05 18:19:33 发布

燕山石头

最新推荐文章于 2022-04-05 18:19:33 发布

阅读量150

点赞数

分类专栏： js 文章标签： J# C C++ C# HTML

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页复选框全选、全不选和反选的效果实现</title>
[code="js"]<SCRIPT LANGUAGE="JavaScript">
//<!-- Begin
///全选
function checkAll() {
for (var j = 1; j <= 2; j++) 
{
var a="c"+j;
box = document.getElementsByName(a);
if(!box[0].checked)
{
	 box[0].checked = true;   
}
}
}

///全不选
function uncheckAll() {
for (var j = 1; j <= 2; j++) {
var a="c"+j;
box = document.getElementsByName(a);
 box[0].checked = false;  
}
}

///反选
function switchAll() {
for (var j = 1; j <= 2; j++) 
{
var a="c"+j;
box = document.getElementsByName(a);
 box[0].checked = !box[0].checked;   
}
}

//  End -->
</script>

</head>
<body>
<form name=checkboxform>
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>

<br><input type=button value="全部选中" onClick="checkAll()">
<br><input type=button value="全部不选" onClick="uncheckAll()">
<br><input type=button value="选择转换" onClick="switchAll()">
<br>
</form>
</body>
</html>[/code]