jquery实现全选反选批量删除效果

1. <div class="box">
2.      <ul>
3.        <li><input type="checkbox" /> 少小离家胖了回</li>
4.        <li><input type="checkbox" /> 乡音无改肉成堆</li>
5.        <li><input type="checkbox" /> 儿童相见不相识</li>
6.        <li><input type="checkbox" /> 笑问胖子你是谁</li>
7. 
8.      </ul>
9. 
10.       <div>
11.         <input type="button" class="seleAll" value="全选" />
12.         <input type="button" class="reverse" value="反选" />
13.         <input type="button" class="op" value="全不选" />
14.         <input type="button" class="del" value="删除" />
15. 
16. 
17.       </div>
18.     </div>

1. //全选
2.    $(".seleAll").on("click",function(){
3.      var oin=$("input[type='checkbox']")
4.      oin.each(function(){
5.          $(this).prop("checked",true)
6.      })
7. 
8.    })
9. 
10.     //全不选
11.     $(".op").on("click",function(){
12.       var oin=$("input[type='checkbox']")
13.       oin.each(function(){
14.           $(this).prop("checked",false)
15.       })
16. 
17.     })
18. 
19.     // 反选 
20. 
21.     $(".reverse").on("click",function(){
22.       // 获取节点 
23. 
24.       var oin=$("input[type='checkbox']")
25. 
26.       oin.each(function(){
27. 
28.         this.checked=!this.checked
29. 
30.       })
31. 
32. 
33.     })
34. 
35.     // 批量删除 
36. 
37.     $(".del").on("click",function(){
38.       var sele=$(":checkbox:checked")
39. 
40.       if (sele.length>0) {
41.         sele.each(function(){
42. 
43.           $(this).parent().remove()
44. 
45.         })
46. 
47.       } else{
48.         alert("至少选一个数据")
49.       }
50. 
51. 
52.     })
53.