批量选中、取消多个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做全部选中,全部取消效果的更多相关文章
-
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
-
黄聪:JQUERY判断操作CHECKBOX选中、取消选中、反选、第二次无法选中的问题
用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. $("#id" ...
-
jQuery操作CheckBox的方法(选中,取消,取值)
jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...
-
JS实现全选与取消 Jquery判断checkbox是否被选中
1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...
-
Extjs4.x完美treepanel checkbox无限级选中与取消
注:当node选中, childNodes逐级全部选中. parentNode当子node全部选中时逐级自动选中,nodes未全部选中, parentNode逐级自动取消选中 在javascript中 ...
-
Tree树节点选中及取消和指定节点的隐藏
指定节点变色 指定节点隐藏 单击节点 未选中则选中该节点 已选中则取消该节点 前台: 1.HTML <ul id="listDept" name="listDept ...
-
JQuery的复选框选中、取消、全选,全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
-
jquery实现checkbox全选和全部取消,以及获取值
在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...
-
测试Javacript里的checkbox是否被选中的status和checked的替换方法
测试Javacript里的checkbox是否被选中的status和checked的替换方法,checkbox.checked和checkbox.status的功能一样,注意checkbox.stat ...
随机推荐
-
javascript数据结构与算法---队列
javascript数据结构与算法---队列 队列是一种列表,不同的是队列只能在队尾插入元素,在队首删除元素.队列用于存储按顺序排列的数据,先进先出,这点和栈不一样(后入先出).在栈中,最后入栈的元素 ...
-
alert弹层无法取消问题解决办法
最近做H5移动端开发的时候,js代码写了个alert,在Android手机上能正常运行,但是在IOS上运行弹出之后却无法取消掉, 而且页面卡死,点不了任何东西,这种情况是非常不好的,用户体验非常糟糕. ...
-
[JS] JavaScript框架(2) D3
D3(Data-Driven Documents)是一个用于网页作图.生成互动图形的JavaScript函数库. 官网:http://d3js.org/ 下载: cdn:<script src= ...
-
【GOF23设计模式】状态模式
来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_状态模式.UML状态图.酒店系统房间状态.线程对象状态切换 package com.test.state; public ...
-
20145215实验四 Android开发基础
20145215实验四 Android开发基础 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事件 ...
-
[Usaco2008 Jan]Cow Contest奶牛的比赛[神奇的FLOYD]
Description FJ的N(1 <= N <= 100)头奶牛们最近参加了场程序设计竞赛:).在赛场上,奶牛们按1..N依次编号.每头奶牛的编程能力不尽相同,并且没有哪两头奶牛的水平 ...
-
2005: [Noi2010]能量采集
2005: [Noi2010]能量采集 Time Limit: 10 Sec Memory Limit: 552 MBSubmit: 1831 Solved: 1086[Submit][Statu ...
-
搭建vue脚手架
1.Node.js安装 1.1下载安装 在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可 1.2测试安装是否成功 Windows+R打开cmd窗口,输入node -v回车出现版本号 ...
-
分析一个react项目
目录结构 下面是使用npx create-react-app web-app来创建的一个项目(已经删除了多余的文件) web-app ├── node_modules │ ├── ....... ...
-
JAVA Clone复制对象
谈到了对象的克隆,就不得不说为什么要对对象进行克隆.Java中所有的对象都是保存在堆中,而堆是供全局共享的.也就是说,如果同一个Java程序的不同方法,只要能拿到某个对象的引用,引用者就可以随意的修改 ...