批量选中、取消多个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>
checkbox批量选择、批量取消效果的js写法:
1 function checkAll(checked){//批量选择、批量取消 2 $('input[name="checkOne"]').attr("checked",checked); 3 }
获取批量选中的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 }
就这样。
在后台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 }