zoukankan      html  css  js  c++  java
  • jQuery实现全选与全不选功能

    初始时:

    实现功能后:

    实现该功能的核心代码:

    <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);

    实现该功能的总的代码:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>jQuery实现全选与全不选功能</title>
     6         <script src="js/jquery-3.3.1.js"></script>
     7         <script>
     8             $(function(){
     9 
    10             $("#selectBtn").click(function(){
    11                 console.log($("#selectBtn"));//selectBtn对应的jQuery对象
    12                 console.log(this);//selectBtn对应的DOM对象
    13                 
    14                 $("tbody input[name='select']").prop("checked",this.checked);//监测在tbody标签下input名为select的是否被勾选
    15                 console.log(this.checked);
    16             
    17             });
    18                 
    19                 
    20                 
    21             })
    22         </script>
    23     </head>
    24     <body>
    25         <table border="1">
    26             <thead><tr><th><input type="checkbox"  id="selectBtn"/> </th><th>付款方式 </th><th>结算方式 </th><th> 状态</th></tr></thead><!--表头-->
    27             <tbody>
    28                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    29                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    30                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    31                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    32                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    33                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    34                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    35                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    36                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    37                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
    38             </tbody><!--内容-->
    39             
    40               
    41              </table>
    42     </body>
    43 </html>
    实现全选与全不选功能.html
  • 相关阅读:
    yii2 gii 命令行自动生成控制器和模型
    控制器中的方法命名规范
    Vue Property or method "" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based
    IDEA插件:GsonFormat
    Spring Boot : Access denied for user ''@'localhost' (using password: NO)
    Typora添加主题
    Git基础命令图解
    Java Joda-Time 处理时间工具类(JDK1.7以上)
    Java日期工具类(基于JDK1.7版本)
    Oracle SQL Developer 连接Oracle出现【 状态: 失败 -测试失败: ORA-01017: invalid username/password; logon denied】
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/10546006.html
Copyright © 2011-2022 走看看