javascript实现全选全不选

标签：javascript   checkbox   

在JSP页面中有6个复选框，第一个复选框是全选和全不选，其余5个为普通复选框，当点击全选复选框后，普通复选框将被全部选中，如果再次点击 全选复选框，那么普通复选框将被全部不选中，同时，如果全选复选框在选中状态下，将普通复选框的选中状态去掉，那么全选复选框也被设为未选中。相反，如果当前全选复选框未被选中，如果普通复选框被全部选中，那么全选按钮也被选中。

下面看JSP中复选框代码

<table>
  		<tr>
  			<td><input type="checkbox" name="checkall" onclick="selectall()"></td>
  			<td>全选</td>
  		</tr>
  		<tr>
  			<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
  			<td>1</td>
  		</tr>
  		<tr>
  			<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
  			<td>2</td>
  		</tr>
  		<tr>
  			<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
  			<td>3</td>
  		</tr>
  		<tr>
  			<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
  			<td>5</td>
  		</tr>
  	</table>

<script type="text/javascript">
		function selectall(){
			//获取全选复选框
			var root = document.getElementById("checkall");
			//获取全选复选框的状态
			var status = root.checked;
			//获取其他复选框集合
			var elem = document.getElementsByName("check");
			//如果全选复选框状态为真则全选其他按钮,否则选不选其他按钮
			if(status){
				for(var i = 0;i<elem.length;i++){
					elem[i].checked =  true;
				}
			}else{
				for(var i = 0;i<elem.length;i++){
					elem[i].checked =  false;
				}
			}
		}
		function checkItem(ele){
			var root = document.getElementById("checkall");
			if(!ele.checked){
				//当在全选状态去除某个非全选复选框时，全选复选框checked属性要设为false
				root.checked = false;
			}else{
				//当在全不选状态时，补全剩下的非全选复选框时，全选复选框checked属性设为true
				var elem = document.getElementsByName(ele.name);
				for(var i = 0;i<elem.length;i++){
					if(!elem[i].checked){
						return;
					}
				}
				root.checked = true;
			}
		}
	</script>

javascript实现全选全不选

标签：javascript   checkbox   

原文地址：http://blog.csdn.net/u011740475/article/details/41744201