复选框为checkbox对象
通过input就可以将一个简单的复选框呈现在页面上
<input type="checkbox" />
要实现的大概就是这样一个页面
思路
全选
因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同
反选
同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true
最上面的全选/全不选功能
通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false
注意
为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的
源代码如下
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>复选框</title> <style type="text/css"> </style>
</head> <body>
<input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选
<br />
<input type="checkbox" name="love" />篮球
<br />
<input type="checkbox" name="love" />排球
<br />
<input type="checkbox" name="love" />羽毛球
<br />
<input type="checkbox" name="love" />乒乓球
<br />
<input type="button" value="全选" onclick="setAll()" />
<input type="button" value="全不选" onclick="setNo()" />
<input type="button" value="反选" onclick="setOthers()" /> <script type="text/javascript">
//全选函数
function setAll() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
loves[i].checked = true;
}
} //全不选函数
function setNo() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
loves[i].checked = false;
}
} //反选
function setOthers() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
if (loves[i].checked == false)
loves[i].checked = true;
else
loves[i].checked = false;
}
} //全选/全不选操作
function setAllNo(){
var box = document.getElementById("boxid");
var loves = document.getElementsByName("love");
if(box.checked == false){
for (var i = 0; i < loves.length; i++) {
loves[i].checked = false;
}
}else{
for (var i = 0; i < loves.length; i++) {
loves[i].checked = true;
}
}
}
</script> </body> </html>
例子2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选，反选按钮</title>
<script type="text/javascript">
window.onload=function(){
/*
*1 #checkedAllBtn
* 2 #checkedBoBtn
* 3 #checkedRevBtn
* 4 #sendBtn
* 5 #checkedAllBox
* 6 #items
* */ var checkedAllBtn = document.getElementById("checkedAllBtn");
//checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBtn.onclick = function(){ //获取四个多选框items
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = true; } //将checkedAllBox设置为选中状态
checkedAllBox.checked = true; }; //全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = false; } //将checkedAllBox设置为选中状态
checkedAllBox.checked = false; }; //反选 也要判断是否都需要全部选中
var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items'); checkedAllBox.checked = true; //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = !items[i].checked; if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false; } } }; //提交按钮
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName('items');
//遍历 items
for(var i=0; i<items.length;i++)
{
//判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
}; checkedAllBox.onclick = function(){
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
items[i].checked = this.checked; } }; //items //如果四个多选框全都选中，则checkedAllBox也应该选中
//如果四个多选框都没选中，则checkedAllBox也应该没选中
var items = document.getElementsByName('items');
//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){ //将checkedAllBox设置为选中状态
checkedAllBox.checked = true; for(var j=0 ; j<items.length ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
} } };
} } </script>
</head>
<body> <form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>