欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery菜单实例(全选,反选,取消)

程序员文章站 2022-09-08 22:54:25
废话不多说,直接上代码

废话不多说,直接上代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document</title>
</head>
<body>
  <input type="button" value="全选" onclick="checkall()">
  <input type="button" value="反选" onclick="reverseall()">
  <input type="button" value="取消" onclick="cancleall()">
  <table border="1">
    <thead>
      <tr>
        <th>选择</th>
        <th>ip</th>
        <th>端口</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
    </tbody>

  </table>
  <script type="text/javascript" src='jquery-3.2.1.js'></script>
  <script type="text/javascript">
    function checkall(){
      $(':checkbox').prop('checked',true);
    }
    function cancleall() {
      $(':checkbox').prop('checked',false);
    }
    function reverseall(){
      $(':checkbox').each(function(){
        var v = $(this).prop('checked')? false:true;  /*三元运算: var v = 条件? 真值:假值*/
        $(this).prop('checked',v)
      })
    }
  </script>
</body>
</html>

以上这篇jquery菜单实例(全选,反选,取消)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。