初始时：

实现功能后：

实现该功能的核心代码：

<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. Py中的矩阵乘法【转载】

    转自:https://blog.csdn.net/cqk0100/article/details/76221749 1.总结 对于array对象,*和np.multiply函数代表的是数量积,如果希望 ...

  2. mac 下 IntelliJ IDEA 快捷键

    编辑器 Cmd + N // 代码生成,getter, setter Opt + Enter // 导入类或者注解

  3. Stephen Wolfram自述

    Stephen Wolfram自述   作者: 阮一峰 大家听说过Stephen Wolfram(斯蒂芬·沃尔夫勒姆)吗? 了解他的经历和成就吗? 我对他了解不多,但是读了下面这篇2005年的演讲,联 ...

  4. Selenium基础知识(二)鼠标操作

    一.鼠标操作 这个需要使用webdriver下的ActionChains类,这个类是操作鼠标操作的: from selenium.webdriver import ActionChains 鼠标操作可 ...

  5. mybatis之注解式开发之关联查询

    package com.bjsxt.mapper; import org.apache.ibatis.annotations.Select; import com.bjsxt.pojo.Clazz; ...

  6. why big data

    很多人都知道大数据很火,就业很好,薪资很高,想往大数据方向发展.但该学哪些技术,学习路线是什么样的呢?用不用参加大数据培训呢?如果自己很迷茫,为了这些原因想往大数据方向发展,也可以,那么大讲台老师就想 ...

  7. mysql 5.6 每天凌晨12:00 重置sequence表中的某个值

    #.创建evevt要调用的存储过程update_current_value_procedure delimiter // drop procedure if exists update_current ...

  8. python django简单的登陆实现

    实现方法: 1,可以先定义一个基础的页面访问路径 例如:http://127.0.0.1:8000/index/  定义index路径 在urls urlpatterns = [ url(r'^ind ...

  9. pdf转txt

    ubuntu pdf转jpg或txt chenlei posted @ 2009年12月30日 17:22 inLinux , 1818 阅读 呵呵,刚刚在网上定购了一款mp5,后来才发现它不支持PD ...

  10. Rpgmakermv（33） Mog_PictureGallery

    ============================================================================= +++ MOG - Picture Gall ...