jquery在表格中的全选不选，下面全选，全选勾选中，下面一项没有选，全选勾未选中，并且带出请求值。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery在表格中的全选不选，下面全选，全选勾选中，下面一项没有选，全选勾未选中，并且带出请求值。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery.min.js" ></script> <style> body{ font-family: "微软雅黑"; font-size: 14px; } .t_table{ border-collapse:collapse; } .t_head{ text-align: center; height:40px; line-height: 40px; } .t_head th{ width:200px; border:1px solid #d7d7d7; } .tbody{ height: 40px; line-height: 40px; text-align: center; } .tbody td{ border:1px solid #d7d7d7; } </style> </head> <body> <table class="t_table"> <tr class="t_head"> <th><input type="checkbox" class="all"/></th><th>学号</th><th>姓名</th><th>年龄</th><th>增加</th> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="1" class="aaa">1</td><td>张三</td><td>19</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="2" class="aaa">2</td><td>小磊</td><td>20</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="3" class="aaa">3</td><td>小月</td><td>21</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="4" class="aaa">4</td><td>小张</td><td>20</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="5" class="aaa">5</td><td>小李</td><td>20</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="6" class="aaa">6</td><td>小王</td><td>21</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="7" class="aaa">7</td><td>小丽</td><td>22</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="8" class="aaa">8</td><td>小红</td><td>19</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="9" class="aaa">9</td><td>小明</td><td>18</td><td>增加</td> </tr> <tr class="tbody"> <td><input type="checkbox"/></td><td id="10" class="aaa">10</td><td>小海</td><td>20</td><td>增加</td> </tr> </table> <script> $(function(){ var selectArr = [], len = $(".tbody").length; $(".all").click(function(){ if(this.checked){ $(".tbody").each(function(i,item){ //$(".tbody").eq(i).find(":checkbox").attr("checked", true); is_ok //$(item).find(":checkbox").attr("checked", true); is_ok $(this).find(":checkbox").prop("checked", true); var this_id = $(this).find(".aaa").attr("id"); var index = selectArr.indexOf(this_id); if(index == -1){ selectArr.push(this_id); } }) }else{ $(".tbody input:checkbox").prop("checked", false); selectArr = []; } console.log(selectArr); }); $(".tbody").click(function(){ var isSelected = $(this).find(":checkbox").prop("checked"), this_id = $(this).find(".aaa").attr("id"), index = selectArr.indexOf(this_id); if(isSelected){ if(index == -1){ selectArr.push(this_id); } }else{ if(index > -1){ selectArr.splice(index,1); } } if(len === selectArr.length){ $(".all").prop("checked",true); }else{ $(".all").prop("checked",false); } console.log(selectArr); }) }) </script> </body> </html>
jquery中方法$.prop与$.attr方法有些许不同。prop用在固有html的属性时，而attr通常用在我们自定义的属性的时候。
所以区别在这里：
<input id="chk1" type="checkbox" /> 没有checked属性的多选框 <input id="chk2" type="checkbox" checked="true" />有checked属性的多选框
prop方法结果如下：
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
attr方法结果如下：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "true"
也考虑到分页中，最后一页选项并不是10条选项的表格列表
以上是关于jquery在表格中的全选不选，下面全选，全选勾选中，下面一项没有选，全选勾未选中，并且带出请求值。的主要内容，如果未能解决你的问题，请参考以下文章