关于列表中checkbox选中，全选设置

最新推荐文章于 2024-07-15 08:34:45 发布

xiaohuan1022

最新推荐文章于 2024-07-15 08:34:45 发布

阅读量859

点赞数

分类专栏： javascript 文章标签： JavaScript HTML ViewUI

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript">
	//点击行时，checkbox处理方法
	function doclick(id){
		var allche = document.getElementById("allid");//全选checkbox
		var che = document.getElementsByName("chname");//获得每行的checkbox
		var ch = document.getElementById("chid"+id);//选中行的checkbox
		if(ch.checked==true){//如果该选中行是已经选中的，则设置该checkbox为不选中
			ch.checked=false;
			allche.checked=false;//设置全选checkbox为不选中
		}else{//如果该选中行是未选中的，则设置该checkbox为选中
			ch.checked="checked";
			//判断是否全部选中，如果已经全部选中，则设置全选checkbox为选中
			var b = true;
			for(var i=0;i<che.length;i++){
				if(che[i].checked==false){
					b = false;
					break;
				}
			}
			if(b){
				allche.checked="checked";
			}
		}
	}
	//全选checkbox的处理方法
	function doallcheck(){
		var allche = document.getElementById("allid");
		var che = document.getElementsByName("chname");
		if(allche.checked == true){
			for(var i=0;i<che.length;i++){
				che[i].checked="checked";
			}
		}else{
			for(var i=0;i<che.length;i++){
				che[i].checked=false;
			}
		}
	}
	//如果单击每行的checkbox，则把该checkbox的选中状态反置
	//该方法主要是为了处理单击每行的checkbox时，无效果的问题
	function doclickcheck(obj){
   		if(obj.checked==true){
   			obj.checked=false;
   		}else{
   			obj.checked=true;
   		}
   }   
</script>
</head>
<body>
<center><br>
<table width="80%" border="0" cellpadding="0" cellspacing="0" style="margin-top: 15">
	<tr>
		<td width="100%" align="center">
				<div align="center">
				<form name=myform method=post action="">
				<table width="100%" id="addtr" border="1" cellpadding="0" cellspacing="0" style="font-size: 5">
					<tr>
						<th width="5%"><input type="checkbox" id="allid" οnclick="doallcheck()" title="全选"></th>
						<th width="30%">费用项目</th>
						<th width="10%">票据张数</th>
						<th width="10%">金额</th>
						<th width="25%">币种</th>
						<th width="20%">备注</th>
					</tr>
						<%
							if(list.size()>0){
								for(int i=0;i<list.size();i++){
									CashModel cm = (CashModel)list.get(i);
						%>
						<tr onMouseOver="this.className='listContentTrOver'" οnmοuseοut="this.className='listContentTrOut'"
						style="cursor: pointer;" οnclick="doclick('<%=cm.getId() %>')">
							<td align="center">
								<input type="checkbox" id="chid<%=cm.getId() %>" name="chname" value="<%=cm.getId() %>" 
									οnclick="doclickcheck(this)">
							</td>
							<td align="left"><%=cm.getMoneyitem() %></td>
							<td align="left"><%=cm.getNotenum() %></td>
							<td align="left"><%=cm.getMoney() %></td>
							<td align="left"><%=cm.getMoneytype() %></td>
							<td align="left"><%=cm.getRemark() %></td>
						</tr>
						<%			
								}
							}
						%>
						
				</table>				
				</form>
				</div>
		</td>
	</tr>
</table>
</center>
</body>
</html>

以上代码主要处理

1.在列表中如果选中行则选中这行的checkbox，如果再次点击则取消选中

2.在列表中包含全选checkbox