全选删除是后台管理中经常用到的,自身js水平弱,所以记下来,方便以后使用。
html代码:
<table> ???????????<thead> ???????????<tr> ???????????????<td><input class="selectAll" type="checkbox"></td> ???????????????<td>ID</td> ???????????????<td>姓名</td> ???????????????<td>年龄</td> ???????????????<td>性别</td> ???????????</tr> ???????????</thead> ???????????<tbody id="content"> <tr> ???????????????<td><input name="check" type="checkbox"></td> ???????????????<td>123</td> ???????????????<td>zhangsan</td> ???????????????<td>24</td> ???????????????<td>boy</td> ???????????</tr> ``` ???????????</tbody></table> <button class="deleteAll">删除全部</button>
js代码:
$(‘.selectAll‘).on(‘click‘, function () { ???????if(this.checked) { ???????????$(‘table input[name="check"]‘).prop(‘checked‘,true).val(‘1‘); ???????} else { ???????????$(‘table input[name="check"]‘).prop(‘checked‘,false).val(‘0‘); ???????} ???}); $(‘.deleteAll‘).on(‘click‘,function () { ???????if(confirm(‘确定删除这些数据吗?‘)){ ???????????var checks = $(‘table input[name="check"]:checked‘); ???????????if(checks.length == 0) { ???????????????alert(‘未选中任何数据!‘); ???????????????return false; ???????????} ???????????$(‘table tbody‘).find(‘:checkbox[value=1]‘).parents(‘tr‘).remove(); ???????????$(‘.selectAll‘).prop(‘checked‘, false); } }) ?// 这里把全选框重置为未选状态
这里是通过给选中的checkbox添加value的方式,然后删除带有这个值的元素。当然也可以添加其他属性,比如data-*什么的。
jquery全选删除
原文地址:http://www.cnblogs.com/AliceLiu/p/7676138.html