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

huanhuan1022

浏览: 55290 次
性别:
来自: 天津

最近访客更多访客>>

aiaiai333111

wxb0712

imyth

KangU4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript HTML

<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" onclick="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'" onmouseout="this.className='listContentTrOut'"
						style="cursor: pointer;" onclick="doclick('<%=cm.getId() %>')">
							<td align="center">
								<input type="checkbox" id="chid<%=cm.getId() %>" name="chname" value="<%=cm.getId() %>" 
									onclick="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

分享到：

java文件操作汇总 | mysql-限制返回记录数limit

2008-12-10 16:41
浏览 10024
评论(1)
查看更多

1 楼 xiaowangtongxue 2013-05-21

//全选
function checkAll(){
    var type = document.forms[0].checkBoxType.value;
    var status="selected";
for (var i = 0; i < document.forms[0].elements.length; i++) {
var e = document.forms[0].elements[i];
if ((!e.disabled) && e.name == "checkboxs") {
e.checked = type;
}
}
if(type=="selected") status="";
document.forms[0].checkBoxType.value=status;
}

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论