Menu jQuery tout sélectionner, inverser la sélection, annuler l'analyse d'instance-js tutoriel-php.cn

Menu jQuery tout sélectionner, inverser la sélection, annuler l'analyse d'instance

小云云

Libérer： 2017-12-29 13:36:48

original

1431 Les gens l'ont consulté

Concernant les fonctions tout sélectionner, inverser la sélection et annuler du menu jQuery, qui sont très courantes, l'éditeur de cet article vous présentera un exemple de menu jQuery (sélectionner tout, inverser la sélection et annuler). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Pas d'autres bêtises, passons directement au 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>

Copier après la connexion

Recommandations associées :

À propos de la résolution du problème de compatibilité entre Chrome et le menu jQuery

Utilisez le plug-in de menu jquery HoverTree pour imiter Jingdong illimité menu_jquery

Utilisation du plug-in de menu jQuery example_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!