Home >Web Front-end >JS Tutorial >jQuery menu select all, invert selection, cancel instance analysis

jQuery menu select all, invert selection, cancel instance analysis

小云云Original: 2017-12-29 13:36:481530browse

Regarding the functions of selecting all, inverting selection, and canceling in jQuery menu, the functions of selecting all, inverting selection, and canceling are very common. In this article, the editor will bring you an example of jQuery menu (selecting all, inverting selection, canceling). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

No more nonsense, let’s go directly to the code

<!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=&#39;jquery-3.2.1.js&#39;></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>

Related recommendations:

About the solution to the compatibility issue between Chrome and jQuery menu

Use jquery menu plug-in HoverTree to imitate Jingdong unlimited menu_jquery

##jQuery menu plug-in usage example_jquery

The above is the detailed content of jQuery menu select all, invert selection, cancel instance analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the problem of using jQuery to dynamically operate name in IE7Next article：Solution to the problem of using jQuery to dynamically operate name in IE7

See more

jQuery menu select all, invert selection, cancel instance analysis

Related articles