批量选中、取消多个checkbox的用法很简单,这个功能也很常用。这里做个总结。

在HTML中的写法:

 <div id="ftpFileDownTr">
<button onclick="getBatchValues();" value="获取批量选择的值"/>
</div>
<table>
<tr id="ftpFileTitle">
<th>
<input type="checkbox" onclick="checkAll(this.checked)"/>全部选中/全部取消
</th>
<th>文件名称</th>
<th>文件大小</th>
<th>文件进度</th>
<th>文件状态</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" name="checkOne" value="a"/>
</td>
<td>文件名a</td>
<td>100M</td>
<td>10%</td>
<td>状态1</td>
<td>操作1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkOne" value="b"/>
</td>
<td>文件名b</td>
<td>100M</td>
<td>10%</td>
<td>状态2</td>
<td>操作2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkOne" value="a"/>
</td>
<td>文件名c</td>
<td>100M</td>
<td>10%</td>
<td>状态3</td>
<td>操作3</td>
</tr>
</table>

checkbox批量选择、批量取消效果的js写法:

 function checkAll(checked){//批量选择、批量取消
$('input[name="checkOne"]').attr("checked",checked);
}

获取批量选中的checkbox的值的方法:

 function getBatchValues(ctx){
var checkedArr=$("input[name='checkOne']:checked");
if (checkedArr.length == 0){
alert("至少要选择一条数据");
return false;
}
var valueStr="";//值以","为分隔符
for(var i=0;i<checkedArr.length;i++){
if(i==0){
valueStr+=$(checkedArr[i]).val();
}else{
valueStr+=","+$(checkedArr[i]).val();
}
}
alert(valueStr);
}

就这样。

在后台java程序中:

 private String checkOne;//后台获取到的属性值,是所有name=checkOne的表单值的总和,以","分隔
public void setCheckOne(String checkOne){
this.checkOne=checkOne;
}
public String getCheckOne(){
return checkOne;
}

checkbox做全部选中,全部取消效果的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. 黄聪:JQUERY判断操作CHECKBOX选中、取消选中、反选、第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. $("#id" ...

  3. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  4. JS实现全选与取消 Jquery判断checkbox是否被选中

    1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...

  5. Extjs4.x完美treepanel checkbox无限级选中与取消

    注:当node选中, childNodes逐级全部选中. parentNode当子node全部选中时逐级自动选中,nodes未全部选中, parentNode逐级自动取消选中 在javascript中 ...

  6. Tree树节点选中及取消和指定节点的隐藏

    指定节点变色 指定节点隐藏 单击节点 未选中则选中该节点 已选中则取消该节点 前台: 1.HTML <ul id="listDept" name="listDept ...

  7. JQuery的复选框选中、取消、全选,全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  8. jquery实现checkbox全选和全部取消,以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

  9. 测试Javacript里的checkbox是否被选中的status和checked的替换方法

    测试Javacript里的checkbox是否被选中的status和checked的替换方法,checkbox.checked和checkbox.status的功能一样,注意checkbox.stat ...

随机推荐

  1. VTK拾取网格模型上的可见点

    消隐与Z-Buffer 使用缓冲器记录物体表面在屏幕上投影所覆盖范围内的全部像素的深度值,依次访问屏幕范围内物体表面所覆盖的每一像素,用深度小(深度用z值表示,z值小表示离视点近)的像素点颜色替代深度 ...

  2. 拯救者y720 双显卡, nvidia 1060 ,Ubuntu16.04 安装 Nvidia 显卡驱动

    为了能够记录,下次可以有参考的东西,就记录如此 多谢网上大牛的帖子,我都是安装您们的才顺利的一次性,无黑屏现象的完成了安装 1. 参考: 1.secure boot option ( 开机进入bios ...

  3. 一道笔试题:给定编码规则,实现decode()方法

    public class CodeDecode {     /*变换函数encode()顺序考察已知字符串的字符,按以下规则逐组生成新字符串:       (1)若已知字符串的当前字符不是大于0的数字 ...

  4. android 制作9.png图

    9.png图片与.png图片的具体不同之处.9.png图片的四周与普通的png图片相比多了一个像素位的白色区域,该区域只有在图片被还原和制造的时候才能看到,当打包后无法看见,并且图片的总像素会缩小2个 ...

  5. 11G新特性 -- ASM的兼容性

    Oracle 11g中,asm同时支持10g和11g数据库.但是asm的版本不能低于数据库的版本. 与兼容性现相关的两个参数: ·compatible.rdbms 支持的最低版本的oracle数据库版 ...

  6. mysql乱码问题解决办法

    最近开发一下小项目,遇到了最常见的乱码问题. 1.数据库使用utf-8  utf-8_generic_ci编码,使用csv上传并导入数据,插入数据的时候出现了问题,有很大部分数据没有被导入,所以使用m ...

  7. iOS中如何创建一个滑出式导航面板(1)

    本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...

  8. dom4j string转为xml

    /**XML转字符串 */ Document document = new SAXReader().read(new File("E:test.xml"));;  String t ...

  9. Linux免密码登录设置 && 设置快捷键

    看到这篇文章,你肯定是有这种需求. 假设要登录的机器为192.168.1.100,当前登录的机器为192.168.1.101. 首先在101的机器上生成密钥(如果已经生成可以跳过): $ ssh-ke ...

  10. mxnet:基础知识和一个简单的示例

    NDArray与NumPy的多维数组类似,但NDArray提供了更多的功能:GPU和CPU的异步计算:自动求导.这使得NDArray能更好地支持机器学习. 初始化 from mxnet import ...