Jquery,全选,反选,

Posted tianranhui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery,全选,反选,相关的知识,希望对你有一定的参考价值。

<!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>2000</td>
  </tr>
  <tr>
     <td> <input type="checkbox" name="" value=""> </td>
     <td>李四</td>
     <td>200</td>
  </tr>
  <tr>
     <td> <input type="checkbox" name="" value=""> </td>
     <td>王五</td>
     <td>200</td>
  </tr>
  <tr>
     <td> <input type="checkbox" name="" value=""> </td>
     <td>赵六</td>
     <td>200</td>
  </tr>
  <tr>
     <td> <input type="checkbox" name="" value=""> </td>
     <td>田七</td>
     <td>200</td>
  </tr>
  <tr>
     <td> <input type="checkbox" name="" value=""> </td>
     <td>王八</td>
     <td>200</td>
  </tr>

</table>

  </body>
</html>

 

以上是关于Jquery,全选,反选,的主要内容,如果未能解决你的问题,请参考以下文章

jQuery_全选/全不选/反选_练习

jQuery_全选/全不选/反选_练习

jQuery_全选/全不选/反选_练习

jQuery--全选反选取消

Layui table中筛选列增加 [全选,反选] 功能【转】

JQuery全选/反选设置