全选,取消,反选,删除表格的应用demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--注意:线上jq地址引入自己修改-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript"> $(function(){ var $checkbox=$("input:checkbox"); //全选按钮 $("#quanxuan").click(function(){ $($checkbox).prop("checked",true); }); //取消按钮 $("#quxiao").click(function(){ $($checkbox).prop("checked",false); }); //反选按钮 $("#fanxuan").click(function(){ for(var i=0;i<$checkbox.length;i++){ $checkbox[i].checked =! $checkbox[i].checked; } }); //删除按钮 $("#del").click(function(){ for(var i=0;i<$checkbox.length;i++){ if($checkbox[i].checked){ var trs_obj=$checkbox[i].parentNode.parentNode; $(trs_obj).remove(); } } }); }); </script> </head> <body> <table border="1" width="500"> <tr> <td>序号</td> <td>商品</td> <td>状态</td> <td>操作</td> </tr> <tr> <td>1001</td> <td>小米5s</td> <td>已发货</td> <td><input type="checkbox" /></td> </tr> <tr> <td>1002</td> <td>小米5s</td> <td>已发货</td> <td><input type="checkbox" /></td> </tr> <tr> <td>1002</td> <td>小米5s</td> <td>已发货</td> <td><input type="checkbox" /></td> </tr> <tr> <td colspan="4"> <input type="button" id="quanxuan" value="全选" /> <input type="button" id="quxiao" value="取消" /> <input type="button" id="fanxuan" value="反选" /> <input type="button" id="del" value="删除" /> </td> </tr> </table> </body> </html>
