码迷,mamicode.com
首页 > Web开发 > 详细

Jquery,全选,反选,

时间:2018-10-19 02:25:48      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:html   oct   sele   bsp   utf-8   type   style   put   script   

<!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,全选,反选,

标签:html   oct   sele   bsp   utf-8   type   style   put   script   

原文地址:https://www.cnblogs.com/tianranhui/p/9813729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!