您好,欢迎访问一九零五行业门户网

jQuery的复选框选择并且获取值

这次给大家带来jquery的复选框选择并且获取值,jquery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下。
一、checkbox选择
在jquery中,选中checkbox通用的两种方式:
$(#cb1).attr(checked,checked); $(#cb1).attr(checked,true);
对应的jquery函数,主要完成三个功能:
1、第一个复选框选中或取消选中,则下面的复选框为全选或取消全选;
2、当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中;
3、将下面的复选框的id值传递给controller层,组成id数组,然后调用相应的方法(一般都是删除)。
<script type="text/javascript">  function chgall(t){//第一个复选框选中或取消选中,则下面的复选框为全选或取消全选;     $(input[name='id']).attr('checked',t.checked);//改变name名为id的input标签内的复选框的checked属性   }   function chg(){//当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中;     var ids = $.makearray($(input[name='id']));     for(var i in ids){       if(ids[i].checked==false){//如果所有的复选框只要有一个未选中,则第一个复选框不会选中         $(input[name='ids']).attr('checked', false);         return;       }     }     $(input[name='ids']).attr('checked', true);//全部选中的情况下,则第一个复选框选中   }   function deletebatch(){//将下面的复选框的id值传递给controller层,组成id数组,拼接url到controller层,调用批量删除方法(deletebatch())方法     var ids = $.makearray($(input[name='id']:checked));//通过$.makearray将id放在数组中     var url = '<%basepath%>/web/goodslist/deletebatch';//此url指向controller层的deletebatch方法,需要id属性     var flag = true;     for(var i in ids){//遍历数组       if(i == 0){           url += ?id= + ids[i].value;//第一个id属性前加?拼接           flag = false;         } else {           url += &id= + ids[i].value;//后面的id属性前加&拼接           flag = false;         }       }     if(flag){//如果没有选中商品       alert(请选中商品!);       return;     }     if(confirm(确定删除记录吗?)){       window.location.href = url;//把拼接好的id数组传给页面     }     } </script>
二、在jsp页面中对应的列表:
1、列表中要给表头中的复选框(第一个复选框)设置name名,并调用chgall(this)方法来实现全选或全不选;
2、table中的复选框设置name名,并调用chg()方法来实现上面的第二个功能;
3、form表单提交时调用deletebatch()方法
<body>   //form表单提交时调用deletebatch()方法     <p> <input type="button" onclick="deletebatch()" value="批量删除" /> </p>   </form:form>   <sys:message content="${message}" />   <table id="ctable" >     <thead>       <tr>       <th><input type="checkbox" name="ids" onchange="chgall(this)" /></th>//调用chgall(this)方法来实现全选或全不选,此处的this指所有复选框对象         <th>商品编号</th>         <th>商品标题</th>       </tr>     </thead>     <tbody>       <c:foreach items="${goods}" var="goods" varstatus="status">         <tr>         <td><input type="checkbox" name="id" value="${goods.goodsid }" onchange="chg()"/></td>//调用chg()方法           <td>${webgoodsinfo.goodsno}</td>           <td>${webgoodsinfo.goodstitle}</td>         </tr>       </c:foreach>     </tbody>   </table>     </body>
三、看下spring mcv中的controller代码
@requestmapping(deletebatch)//对应jsp页面中的deletebatch()请求   public string deletebatch(long[] id, redirectattributes redirectattributes){//此处的id为页面中的id值,必须保持一直!!!!     if(id !=null&&id.length!=0){       goodsservice.deletebatch(id);     }     return redirect:+global.getadminpath()+/web/webgoodsinfo/?repage;//重定向到列表页面   } }
看下效果:
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jquery的插件怎么打印页面内容
jquery运行页面怎样默认触发点击事件
layui中的树形关于取值传值详解
以上就是jquery的复选框选择并且获取值的详细内容。
其它类似信息

推荐信息