使用Html+JavaScript实现复选框功能----全选/反选
一、Html>body部分:
<body>
<table border="1" width="60%">
<tr>
<td><input type="checkbox" name="all"/>全选</td>
<td>复选框示例</td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>1</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>2</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>5</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>6</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="reall"/>反选</td>
<td></td>
</tr>
</table>
</body>
二、javascript部分:
<script>
var allDom = document.getElementsByName("all")[0]; //找到全选框
var numDoms = document.getElementsByName("num"); //找到6个选项的数组
var reallDom = document.getElementsByName("reall")[0]; //找到反选框
allDom.onclick = function(){ //定义一个全选框的点击函数
if(this.checked){ //判断全选框是否选中,如果返回值为true代表选中
for(var i=0;i<numDoms.length;i++){ //使用for循环选中6个列表框
numDoms[i].checked = true;
}
}else{ //如果返回值为false代表未选中
for(var i=0;i<numDoms.length;i++){ //使用for循环取消6个列表框的选中状态
numDoms[i].checked = false;
}
}
}
reallDom.onclick = function(){ //定义一个反选框的点击函数
for(var i=0;i<numDoms.length;i++){ //使用for循环遍历数组
if(!numDoms[i].checked){ //如果下标为i的列表框处于未选中状态时
numDoms[i].checked = true; //选中
}else{ //反之,如果下标为i的列表框处于选中状态时
numDoms[i].checked = false; //取消选中
allDom.checked = false; //全选框随之取消选中
}
}
}//注:使用jQuery时需要在页面中引入jQuery----
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
$(function(){ //页面加载完成后执行事件
$("[name=num]").click(function(){ //使用属性选择器选择6个列表框数组定义点击函数
for(var i=0;i<numDoms.length;i++){ //for循环遍历数组
if(!numDoms[i].checked){ //如果有任意的一个列表框未选中
allDom.checked = false; //则取消选中全选框
break;
}else{ //反之
allDom.checked = true; //选中全选框
}
}
});
});
</script>
尾声:听说以后很常用,留此随笔以便复习。
