初始时：

实现功能后：

实现该功能的核心代码：

<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. linux curl命令如何上传本地文件夹和下载文件

    本地有一个文件夹为my_dir,里面有四个文件,分别是test1.txt,user_account,tools_user,plans 要把这个my_dir文件夹传到ftp 192.168.8.251 ...

  2. css3径向渐变

    #grad2 { height: 440px; width: 440px; border-radius: %; background: -webkit-radial-gradient(closest- ...

  3. iOS 新浪微博-5.0 首页微博列表

    首页显示微博列表,是微博的核心部分,这一章节,我们主要是显示出微博的列表. 导入第三方类库 pod 'SDWebImage', '~> 3.7.3' pod 'MJRefresh', '~> ...

  4. java基础(三) -基本数据类型

    变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义不同类型的变量,可以在内存 ...

  5. react native中使用ScrollableTabView

    第一步,下载依赖 npm install react-native-scrollable-tab-view --save 第二步,引入 import ScrollableTabView, { Scro ...

  6. hadoop管理

    hadoop管理工具: 一,dfsadmin工具 dfsadmin 工具用途比较广,既可以查找HDFS状态信息,又可以在HDFS上执行管理操作,以hdfs dfsadmin形式调用,且需要超级用户权限 ...

  7. WebSocket.之.基础入门-断开连接处理

    ebSocket.之.基础入门-断开连接处理 在<WebSocket.之.基础入门-后端响应消息>的代码基础之上,继续更新代码.代码只改动了:TestSocket.java 和 index ...

  8. expect简介和使用例子

    expect简介和使用例子   expect简介 expect是一款自动化的脚本解释型的工具. expect基于tcl脚本,expect脚本的运行需要tcl的支持. expect对一些需要交互输入的命 ...

  9. db2修改表结构，增加列，删除列等

    增加一列:ALTER TABLE tbname ADD COLUMN columnName datatype; 增加多列:ALTER TABLE tbname ADD COLUMN columnNam ...

  10. Unity shader学习之轮廓效果

    将物体描一层边可以使游戏看起来具有卡通风格,一种简单的实现方法如下: 将物体渲染2次,即使用2个通道. 第一个通道将顶点沿法线(或中心点到顶点的方向)做一个偏移,即将模型扩大一点,并将颜色渲染成轮廓的 ...