初始时:
实现功能后:
实现该功能的核心代码:
- <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>
- </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
来源: http://www.bubuko.com/infodetail-2990236.html