<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="/vue/js/jquery-3.3.1.js" type="text/javascript">  </script>

    <script type="text/javascript">

    $(function ()

    {

       //所有复选选中让 全选的复选框选中

      $("table tr td input[type='checkbox']").click(function(){

          var check= $("table tr td input[type='checkbox']:checked").length;

          var all=$("table tr td input[type='checkbox']").length;

          if(check==all)

          {

            $("#all").prop("checked",true)

          }

          else {

            $("#all").prop("checked",false)

          }

      })

        $("#all").click(function(){

          var c=  $("#all").prop("checked")

          if (c==true) {

            $("table tr td input[type='checkbox']").prop("checked",true)

          }

          else {

              $("table tr td input[type='checkbox']").prop("checked",false)

          }

        })

  //反选按钮

      $("#selectno").click(function(){

        //获取所有未选中行的checkbox长度

      var no=  $("table tr td input[type='checkbox']:not(:checked)").length

          //获取所有选中行的checkbox长度

      var yes= $("table tr td input[type='checkbox']:checked").length

            alert( '选中长度'+yes)

            alert('未选中长度'+no)

            $("table tr td input[type='checkbox']").each(function(){

            $(this).prop("checked",!$(this).prop("checked"))

            })

        })

    })

    </script>

  </head>

  <body>

    全选：<input type="checkbox" id="all" >

    <input type="button" id="selectno" value="反选" >

<table>

  <tr>

    <td>状态</td>   <td>姓名</td>   <td>工资</td>

  </tr>

  <tr>

    <td> <input type="checkbox" name="" value=""> </td>

    <td>张三</td>

    <td></td>

  </tr>

  <tr>

     <td> <input type="checkbox" name="" value=""> </td>

     <td>李四</td>

     <td></td>

  </tr>

  <tr>

     <td> <input type="checkbox" name="" value=""> </td>

     <td>王五</td>

     <td></td>

  </tr>

  <tr>

     <td> <input type="checkbox" name="" value=""> </td>

     <td>赵六</td>

     <td></td>

  </tr>

  <tr>

     <td> <input type="checkbox" name="" value=""> </td>

     <td>田七</td>

     <td></td>

  </tr>

  <tr>

     <td> <input type="checkbox" name="" value=""> </td>

     <td>王八</td>

     <td></td>

  </tr>

</table>

  </body>

</html>

Jquery，全选，反选，的更多相关文章

  1. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  3. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  4. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  5. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  6. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  7. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  8. jquery全选反选

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

  9. jQuery 全选 反选 单击行改变背景色

    我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...

  10. jquery 全选反选 .prop('checked',!$(this).is(':checked'));

    //废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...

随机推荐

  1. typedef定义数组类型

    typedef语句定义数组类型 1. 一维数组类型的定义格式 typedef <元素类型关键字><数组类型名>[<常量表达式>]; 例如: (1) typedef ...

  2. 1、Dreamweaver+php开发网站第一步

    1.首先在appserv目录下的www中建立一个网站文件夹,例如test 2.在Dreamweaver中的站点下新建站点进行配置,其中站点选项和服务器选项都要配置. 3.然后在Dreamweaver中 ...

  3. 跟着未名学Office – 整体了解 Ms Office 2010

    目录 MS Office 2010    2 Microsoft Office System    2 Ribbon(功能区)    2 文件选项卡    3 SmartArt    3 屏幕截图   ...

  4. mysql 高可用架构

    什么是高可用 不可用出现的情况 如何实现高可用 第一种方法 第二种方法 MMM 和 MHA MHA更好的处理方式 安装步骤 优缺点 读写分离

  5. 快速了解Python的定制类

    多重继承 class Student(man,oldman): pass 可以继承多个父类,拥有他们的方法,如果有父类有相同的方法,哪个在前用哪个 定制类 看到类似__slots__这种形如 __xx ...

  6. Notepad++ 中使用tail -f功能

    想要notepad++中有tail -f的功能吗? 可以如下配置 Settings > Preferences > MISC 在 File Status Auto-Detection下 “ ...

  7. vc++获取网页源码之使用import+接口方式

    1.使用IWinHttpRequest获取网页源码 首先要创建基于对话框的mfc应用程序 2.import+接口方式 首先导入winhttp.dll,使用IWinHttpRequest接口 #impo ...

  8. Java-Runoob-高级教程-实例-方法：01. Java 实例 – 方法重载

    ylbtech-Java-Runoob-高级教程-实例-方法:01. Java 实例 – 方法重载 1.返回顶部 1. Java 实例 - 方法重载  Java 实例 先来看下方法重载(Overloa ...

  9. Eclipse代码提示补全问题，自动选择第一个

    原地址 http://blog.csdn.net/liuhhaiffeng/article/details/7179243 Eclipse具有代码提示功能, 但是默认的提示只有在输入".&q ...

  10. css文字链接滑过向上移动1像素

    方法一:行高 a{line-height:22px;} a:hover{line-height:21px;}   方法二:定位 a{position:absolute;top:0;} a:hover{ ...