jQuery menu select all, invert selection, cancel instance analysis-JS Tutorial-php.cn

jQuery menu select all, invert selection, cancel instance analysis

小云云

Release： 2017-12-29 13:36:48

Original

1464 people have browsed it

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>

Copy after login

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!