checkbox做全部选中,全部取消效果

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

在HTML中的写法:

复制代码
 1 <div id="ftpFileDownTr">
 2     <button onclick="getBatchValues();" value="获取批量选择的值"/>
 3 </div>
 4 <table>
 5         <tr id="ftpFileTitle">
 6             <th>
 7                 <input type="checkbox" onclick="checkAll(this.checked)"/>全部选中/全部取消
 8             </th>
 9             <th>文件名称</th>
10             <th>文件大小</th>
11             <th>文件进度</th>
12             <th>文件状态</th>
13             <th>操作</th>
14         </tr>
15         <tr>
16             <td>
17                 <input type="checkbox" name="checkOne" value="a"/>
18             </td>
19             <td>文件名a</td>
20             <td>100M</td>
21             <td>10%</td>
22             <td>状态1</td>
23             <td>操作1</td>
24         </tr>
25         <tr>
26             <td>
27                 <input type="checkbox" name="checkOne" value="b"/>
28             </td>
29             <td>文件名b</td>
30             <td>100M</td>
31             <td>10%</td>
32             <td>状态2</td>
33             <td>操作2</td>
34         </tr>
35         <tr>
36             <td>
37                 <input type="checkbox" name="checkOne" value="a"/>
38             </td>
39             <td>文件名c</td>
40             <td>100M</td>
41             <td>10%</td>
42             <td>状态3</td>
43             <td>操作3</td>
44         </tr>
45 </table>
View Code
复制代码

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

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

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

复制代码
 1 function getBatchValues(ctx){
 2     var checkedArr=$("input[name='checkOne']:checked");
 3     if (checkedArr.length == 0){
 4         alert("至少要选择一条数据");
 5         return false;
 6     }
 7     var valueStr="";//值以","为分隔符
 8     for(var i=0;i<checkedArr.length;i++){
 9         if(i==0){
10             valueStr+=$(checkedArr[i]).val();
11         }else{
12             valueStr+=","+$(checkedArr[i]).val();
13         }
14     }
15         alert(valueStr);        
16 }
View Code
复制代码

就这样。

在后台java程序中:

复制代码
1 private String checkOne;//后台获取到的属性值,是所有name=checkOne的表单值的总和,以","分隔
2 public void setCheckOne(String checkOne){
3     this.checkOne=checkOne;
4 }
5 public String getCheckOne(){
6     return checkOne;
7 }
View Code
复制代码

 

posted @   夏天的尾巴%  阅读(742)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 葡萄城 AI 搜索升级:DeepSeek 加持,客户体验更智能
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
点击右上角即可分享
微信分享提示