<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>全选和全不选功能</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#selectBtn").click(function(){//this.checked
console.log($("#selectedBtn"));//selectBtn对应的jQuery对象
console.log(this);//selectBtn对应的DOM对象
$("tbody input[name='select']").prop("checked",this.checked);
});
});
</script>
</head>
<body>
<p>
<span>Category:Hierarchy</span>
Child Selector("parent>child")
</p>
</div>
<table id="mytable" border="1" cellspacing="" cellpadding="">
<thead>
<tr><th><input type="checkbox" id="selectBtn" /></th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
</tbody>
<tfoot>
<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
</tfoot>
</table>
<table border="1" cellspacing="" cellpadding="">
<tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
</table>
</body>
</html>
全选\全部不选
1，先选择全选按钮
2，添加事件
$("#selectBtn").click(function(){
$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
