初始时:
实现功能后:
实现该功能的核心代码:
<script>
$(function(){ $("#selectBtn").click(function(){
console.log($("#selectBtn"));//selectBtn对应的jQuery对象
console.log(this);//selectBtn对应的DOM对象 $("tbody input[name='select']").prop("checked",this.checked);
console.log(this.checked); }); })
</script>
监测在tbody标签下input名为select的是否被勾选:
$("tbody input[name='select']").prop("checked",this.checked);
实现该功能的总的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现全选与全不选功能</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){ $("#selectBtn").click(function(){
console.log($("#selectBtn"));//selectBtn对应的jQuery对象
console.log(this);//selectBtn对应的DOM对象 $("tbody input[name='select']").prop("checked",this.checked);//监测在tbody标签下input名为select的是否被勾选
console.log(this.checked); }); })
</script>
</head>
<body>
<table border="1">
<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>
</tbody><!--内容--> </table>
</body>
</html>
实现全选与全不选功能.html