<!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. php exec返回状态为1

    之前在用到php exec 时 总是保存,返回状态1,那这时怎么排查呢 exec('ls 2>&1', $output, $return_val); print_r($output); ...

  2. #ifdef __cplusplus extern ＂C＂ { #endif 含义

    转载! 1.在好多程序中我们会遇到下面代码段 #ifdef __cplusplus         extern "C" {         #endif //c语法代码段 #if ...

  3. ubuntu 脚本执行

    1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以无"执行权限" 注:该命令通常用 ...

  4. 接口文档管理系统mindoc安装手册

    硬件: centos6.9-64 mysql5.6 首先确保系统安装gcc套件 yum -y gcc 第一步,安装mysql(如果不会在Linux安装mysql,请看下面文章) http://www. ...

  5. 【并发编程】使用BlockingQueue实现<多生产者，多消费者>

     MasterThread: 持有一个BlockingQueue队列,用于并发接收存储MetaData对象; 使用Hash一致性算法ketama,来选择SlaveThread节点; 从Blocking ...

  6. JVM异常之：方法区溢出OutOfMemoryError: PermGen space

    1.方法区溢出(Perm持久代溢出) 在jdk1.6及之前的版本中,常量池放在Perm区也即是方法区中,所以在jdk1.6版本中,常量池溢出可以说是方法区溢出. 示例一: 方法区溢出的示例见<J ...

  7. Centos 7.4 安装samba服务

    # See smb.conf.example for a more detailed config file or # read the smb.conf manpage. # Run 'testpa ...

  8. Linux下的文件操作——基于文件描述符的文件操作(1)

    概要: 打开.创建和关闭文件 读写文件 文件定位 获取文件信息 打开.创建和关闭文件 函数原型: #include <sys/types.h> //头文件 #include <sys ...

  9. [UE4]碰撞机制

    应用于两种情况: 一.射线追踪,LineTrace 1.射线来自某个Trace Channel 2.Trace Channel 默认有两个:Visibility(不是可见的意思.只是Channel名称 ...

  10. [UE4]让子弹飞：抛射物子弹、瞬时子弹

    两种子弹: 1.瞬时子弹.(使用射线) 没有飞行时间,即打即中. 2.飞行的子弹. a.使用ProjectMovement(抛射物)组件 创建一个继承自“Actor”的蓝图“BP_LauncherBu ...