初始时：

实现功能后：

实现该功能的核心代码：

<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. spring的面向切面实现的两种方式

    面向切面:主要应用在日志记录方面.实现业务与日志记录分离开发. spring面向切面有两种实现方式:1.注解 2.xml配置. 1.注解实现如下: (1)配置如下: <?xml version= ...

  2. koa2的文件上传

    使用koa2搭建文件上传服务,后端代码 const os = require('os'); const path = require('path'); const koaBody = require( ...

  3. selenium及webdriver的原理【转】

    selenium与webdriver整合后,形成的新的测试工具叫做selenium2.x.在selenium1时间,selenium使用javascript来达到测试自动化的目标. 1. seleni ...

  4. 6.C# 释放非托管资源2

    C# 释放非托管资源 C#中资源分为托管资源和非托管资源. 托管资源由垃圾回收器控制如何释放,不需要程序员过多的考虑(当然也程序员也可以自己释放). 非托管资源需要自己编写代码来释放.那么编写好的释放 ...

  5. 原生table相关写法

    1.<table style="width: 100%;text-align: center" cellpadding="0" cellspacing=& ...

  6. 读书笔记_Effective C++_条款一：将C++视为一个语言联邦

    C++起源于C,最初的名称为C with Classes,意为带类的C语言,然而,随着C++的不断发展和壮大,在很多功能上已经远远超越了C,甚至一些C++程序员反过来看C代码会觉得不习惯. C++可以 ...

  7. 46.HTML---18个学习 flexbox 的优质资源

    大家都在谈论的“flexbox”是什么呢?它能帮我们解决什么问题呢?现在你可以在你的项目中使用“flexbox”吗?这些指南.教程.网站和工具会告诉你你需要知道的关于“flexbox”的知识. Lea ...

  8. react native初识

    开发的第一步就是搭建rn的开发环境,你可以去官网去查看教程也可以 点击 http://bbs.reactnative.cn/topic/10 进去查看window的开发环境安装的教程:注意:很关键的一 ...

  9. <1>lua编译环境 数据类型和局部变量

    1.编译环境 http://www.lua.org/download.html下载 解压后 bin目录中lua.exe运行   luac.exe编译成lua字节码 2.基本数据类型 整数,小数,布尔值 ...

  10. Rpgmakermv（32） Yep_mainmenumanager

    ============================================================================ Introduction ========== ...