<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$("#selectBtn").click(function(){
$("tbody input[name='select']").prop("checked",this.checked);//prop(a,b)表示:把b属性设为a
});
});
</script>
</head>
<body>
<table id="mytable" border="1" cellspacing="" cellpadding="10">
<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>
</tbody>
<tfoot>
<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
</tfoot>
</table>
</body>
</html>
jQuery中实现全选,全不选功能
最新推荐文章于 2023-08-16 19:57:15 发布