Table代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<input type="button" id="delete" name="name" value="删除" /> <div style="text-align: center"> <table border="1" id="td"> <tr> <th> <input id="all" type="checkbox" name="all" value="" /> </th> <th>地址ID </th> <th>地址标题 </th> <th>详细地址 </th> <th>创建时间 </th> </tr> <% foreach (var item in addlist) { %> <tr> <td> <input type="checkbox" name="name" value="<%=item.Aid %>" /></td> <td><%=item.Aid %></td> <td><%=item.Atitle %></td> <td><%=item.Acontent %></td> <td><%=item.ACTime %></td> <td></td> </tr> <% } %> </table> </div> |
jQuery代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> //全选 $(function () { $('#all').click(function () { if (this.checked) { $('#td :checkbox').prop("checked", true); } else { $('#td :checkbox').prop("checked", false); } }); //获取选中的value(id)删除 $('#delete').click(function () { var valArr = new Array; $("#td :checkbox[name='name']:[checked]").each(function (i) { valArr[i] = $(this).val(); }); for(var i=0;i<valArr.length;i++) { alert(valArr[i]); } }); }); </script> |
解析
全选
全选是首先id选择器选中全选input，判断一下当全选input被选中的时候将table(id=td)里面的所有复选框的checked属性全部修改为true即可实现全选的效果，同理将checked修改为false就取消了全选
多选单选获取选中的value值
获取删除按钮，创建一个Array数组对象，因为全选按钮也在
table(id=td)里面 ，但是全选按钮的name值为all，所以加一个条件只获取name属性为name并且已经选中的复选框，each遍历他们，将被选中的复选框的值添加到数组里面，然后通过for循环即可取出每个被选中的复选框value的值。可以在for循环里面发ajax实现通过id删除等功能。
评论