<!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. 荣耀9少 gms core服务

    1.首先安装gms core即本软件gms安装器,安装时候会重启一次. gms core apk下载地址:http://www.paopaoche.net/android/307559.html 注意 ...

  2. XBOX360更新游戏封皮（FSD自制系统）

    第一步,请记下上图左下角的IP地址第二步,打开电脑IE浏览器,输入“第二步”你记下的IP地址“回车”然后,就如下图所示了. 输入账号:f3http 密码:f3http 进入,然后你就进到你的360 F ...

  3. IDE0022 使用方法的表达式主体

    这错误提示意思应该是:推荐您将此方法改为用“表达式主体”形式实现 所谓表达式主体,是类似 public void DisplayName() => Console.WriteLine(ToStr ...

  4. Random 中的种子怎么理解

    种子就是生成随机数的根,就是产生随机数的基础.计算机的随机数都是伪随机数,以一个真随机数(种子)作为初始条件,然后用一定的算法不停迭代产生随机数.Java项目中通常是通过Math.random方法和R ...

  5. JavaScript中date日期的n种方法

    转自博客 https://blog.csdn.net/u013992330/article/details/54318737

  6. redis 主从复制 [转]

    一.Redis的Replication: 这里首先需要说明的是,在Redis中配置Master-Slave模式真是太简单了.相信在阅读完这篇Blog之后你也可以轻松做到.这里我们还是先列出一些理论性的 ...

  7. Python——字符串2.0（实验）（python programming）

    直接打s,是程序员看到的:打print(),是用户看到的 列表 ] #列表索引,与数组唯一不同:等号左端可修改 转载自:https://www.cnblogs.com/wwwwwei/p/104816 ...

  8. 学习笔记之pandas Foundations | DataCamp

    pandas Foundations | DataCamp https://www.datacamp.com/courses/pandas-foundations Many real-world da ...

  9. Linux下自制回收站

    Linux下自制回收站 相信熟悉linux系统的人都知道rm的厉害,也大都听说过有rm造成的生产事故,本文将详细介绍如何在linux环境下制作回收站以避免数据误删除,如何恢复回收站中的数据,如何查看回 ...

  10. 敏捷软件开发——第8章　SRP：单一职责原则

    第8章 SRP:单一职责原则 一个类应该只有一个发生变化的原因. 8.1 定义职责 在SRP中我们把职责定义为变化的原因.如果你想到多于一个的动机去改变一个类,那么这个类就具有多于一个的职责.同时,我 ...