初始时：

实现功能后：

实现该功能的核心代码：

<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

jQuery实现全选与全不选功能的更多相关文章

  1. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

  2. jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

  3. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

  4. jQuery checkbox 所有 全选、全不选、是否选中等

    下面是网络收集: jquery判断checked的三种方法:.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或fals ...

  5. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  6. jquery实现radio按纽全不选和checkbox全选的实例

    用jquery实现以下两个这个功能: 1.对所有单选按纽中radio全不选 单选按纽:<input type="radio" name="f1">A ...

  7. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  8. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  10. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

随机推荐

  1. Tf中的SGDOptimizer学习【转载】

    转自:https://www.tensorflow.org/api_docs/python/tf/train/GradientDescentOptimizer 1.tf.train.GradientD ...

  2. kfrobotaidlog查找

    ======查看最新的大于6的数量========== select c.questionid from (select a.questionid, b.clientQuestion from sim ...

  3. mac-禅道环境

    开机不能访问,换成IP地址就好了

  4. 数据分析与挖掘 - R语言：多元线性回归

    一个简单的例子!环境:CentOS6.5Hadoop集群.Hive.R.RHive,具体安装及调试方法见博客内文档. 线性回归主要用来做预测模型. 1.准备数据集: X Y 0.10 42.0 0.1 ...

  5. iOS UI进阶-3.0 核心动画

    Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.framework和引入对应的框架<Quar ...

  6. 第一次使用theos自己遇到的坑

    这里自己遇到的一些问题,总结一下: 第一个问题建立好theos工程后make出现 xcrun: error: SDK "iphoneos" cannot be located xc ...

  7. 43.HTML--a标签之mailto邮箱属性用法

    HTML 属性标记之 mailto 的用法详解   大家知道,mailto是网页设计制作中的一个非常实用的html标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这样网页浏 ...

  8. Css预处理器---Less(三)

    四.Color函数 1.less提供的颜色运算函数,颜色会被转换成HSL色彩空间,然后再通道级别进行操作,函数如下: lighten(@color, 10%); //return a color wh ...

  9. kali linux dns劫持

    1,確定局域網ip 2,修改/etc/ettercap/etter.dns 添加自己的ip和劫持域名 3,/var/www/index.html             (修改html页面替换被劫持的 ...

  10. ubuntu安装rvm

    sudo apt-get install curl git-core bash -s stable < <(curl -s https://raw.github.com/wayneeseg ...