多选框的相关操作，1.全选，取消全选，2.后端获取多选框的数据

来源：互联网发布：gcf软件下载编辑：程序博客网时间：2024/06/16 03:58

1.jsp代码：

    <table>     <caption>     <a class="add-classrules" href="javascript:void(0);"><i class="fa fa-plus fa-lg"></i> 添加规则</a>&nbsp;&nbsp;     <a class="upload-classrules" href="javascript:void(0);"><i class="fa fa-upload fa-lg"></i> 上传规则</a>&nbsp;&nbsp;     <a class="batchDelete-classrules" href="javascript:void(0);"><i class="fa fa-trash-o fa-lg"></i> 批量删除</a>&nbsp;&nbsp;     <a class="undelete-classrules" href="javascript:void(0);" style="visibility: hidden;"><i class="fa  fa-remove fa-lg"></i> 取消删除</a>     </caption>     <thead>       <tr>         <th width="5%" style="display: none;"><input id="allSelectCheckbox" type="checkbox" name="allSelect"/></th>         <th>序号</th>         <th>规则</th>         <th>创建时间</th>         <th>操作</th>       </tr>     </thead>      <tbody>          <tr>           <td class="batchDeleteCheckbox" style="display:none;"><input type="checkbox" name="batchDelete" value="1" /></td>           <td class="batchDeleteCheckbox" style="display:none;"><input type="checkbox" name="batchDelete" value="2" /></td>           <td class="batchDeleteCheckbox" style="display:none;"><input type="checkbox" name="batchDelete" value="3" /></td>           <td class="batchDeleteCheckbox" style="display:none;"><input type="checkbox" name="batchDelete" value="4" /></td>         </tr>     </tbody>  </table>

2. js代码

//批量删除 点击    $('.batchDelete-classrules').click(function(){     $('.undelete-classrules').css("visibility","visible");     $('.classrules-table thead tr th:eq(0)').css("display","table-cell");     $('.batchDeleteCheckbox').css("display","table-cell");    });    //取消删除  点击    $('.undelete-classrules').click(function(){    $('.undelete-classrules').css("visibility","hidden");    $('.classrules-table thead tr th:eq(0)').css("display","none");    $('.batchDeleteCheckbox').css("display","none");    $("input:checkbox[name='batchDelete']").prop("checked",false);//取消全选   $("input:checkbox[name='allSelect']").prop("checked",false);//取消全选   });    //多选，取消多选功能    $('#allSelectCheckbox').click(function(){       if( $('#allSelectCheckbox').is(":checked")){       $("input:checkbox[name='batchDelete']").prop("checked",this.checked);//全选       }else {       $("input:checkbox[name='batchDelete']").prop("checked",this.checked);//取消全选                              // $("input:checkbox[name='batchDelete']").attr('checked',false);//取消全选         //$(".batchDeleteCheckbox").attr('checked',false);//取消全选         //$("[name='batchDelete']").removeAttr("checked");//取消全选                 }        });

3. java后端，获取多选框中的值：后端未测试，贴上备用

response.setCharacterEncoding("UTF-8");        request.setCharacterEncoding("UTF-8");        String [] shuigou=request.getParameterValues("batchDelete");        for (int i = 0; i < shuigou.length; i++) {            String shuiguoname=shuigou[i];            System.out.println(shuiguoname);        }

主要是多选功能的实现，else中贴出的三个注掉的方式，都有问题，attr(); 第一轮是能够实现全选，取消全选功能，但是，第二轮就会失效，百度也未找到具体说明，推荐使用prop(); 自行百度

1 0