<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
分享到：
相关推荐
工程从数据库中获取相关信息，通过列表显示所有数据，实现了checkbox的全选，并将选中部分的数据传入后台，进行操作。
ExpandableListView中group和child自定义视图带CheckBox，实现child全选、部分选中功能，同时实现类似邮件群发的用户选择功能，选中的用户在EditText中显示，点击后移除. 更新： 1. ExpandableListView勾选后生成的...
当选中“全选”时，列表中所有的项目都会被选中；反之，取消选中“全选”时，所有项都会被取消勾选。 在列表中选中部分数据项目时，“全选”框会呈现不确定状态（Indetermine）。 由此看出，“全选”复选框与列表...
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery...
QTableWidget表头添加复选框实现全选功能。有点投机取巧，但是功能是实现了。实现很简单。
手动绘制winfrom DataGridView的列头CheckBox 实现单击列头的CheckBox全选和不全选!
DataGridView列头带全选功能的CheckBox示例，全选状态下，取消列表中某一列的选中状态，列头的状态也会变为不选中，若下面的列表都选中了，则列头也会自动变为选中状态。
这是一款原生JS实现的，点击表格列表选中，可以单选、多选、全选和反选的表格列表选择代码。 js代码 [removed] var all = document.getElementById("j_cbAll"); var tbody = document.getElementById("j_...
2、选中列表中的所有checkbox，全选也会被勾选；（这里我想到的方法是给每一个对象增加checked字段，然后勾选触发echoChange（）函数，用了一个cc变量计算当前checked为true的个数，然后再判断被勾选个数与数组长度...
这应该是一个比较实用的前端技巧吧，很多时候我们都需要点击一个checkbox，然后将所有的复选框自动全部选中，比如新浪邮箱中，一些CMS系统的后台中，使用本JS效果后，会大大增强了操作体验，那么究竟是如何实现这一...
和大家分享一段基于jQuery实现checkbox列表全选、反选和不...一般从数据库读出来的列表都需要批量选中以便删除与编辑等，下面我们就来模拟下，实现复选框checkbox的全选与不选，先建立html <li><label><input ty
程序员在开发的时候，经常会遇到对查询列表中的记录进行批量操作的情况，实现倒是也不难，用javascript就行，但每次都要重新再写一遍，本人在工作中把它总结为一个模块，记录下来，以便再用。
本文实例为大家分享了JavaScript实现表单全选或反选的具体代码，供大家参考，具体内容如下 表单中常常会用到checkbox复选框，通过复选框做出的列表全选或全不选的效果也是很常见的，比如购物车的商品列表，所以本...
二级可展开列表,组条目全选checkBox,子条目有选中checkbox,不乱序
最近做了一个项目其中遇到这样的需求，要实现checkbox跨页多选功能，经过小编整理，顺利解决，今天小编给大家分享Java中checkbox实现跨页多选的方法，需要的的朋友参考下
Flex实现带复选框的列表树，实现全选和反选
主要介绍了vue循环中点击选中再点击取消(单选)的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
用RecyclerView实现树形列表以及设置CheckBox三种选择状态（全选、部分选中、全不选）样式
本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考，具体如下： 适用于网页多选后需要进行批量操作的场景（如批量删除等）。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个...