Maison > interface Web > js tutoriel > le corps du texte

Implémenter des fonctions telles que la sélection de toutes les cases à cocher, l'inversion des sélections et la désélection de toutes les cases en fonction de jquery

高洛峰
Libérer: 2017-02-06 13:10:22
original
935 Les gens l'ont consulté

jquery implémente des fonctions telles que tout sélectionner, inverser la sélection et tout désélectionner. Ce qui suit est un exemple. Supposons que la page comporte l'ensemble de cases à cocher suivant et plusieurs boutons associés (sélectionner tout, sélectionner inversement, tout désélectionner, etc.) :

<input type="checkbox" name="fruit" value="apple" />苹果
<input type="checkbox" name="fruit" value="orange" />橘子
<input type="checkbox" name="fruit" value="banana" />香蕉
<input type="checkbox" name="fruit" value="grape" />葡萄
  
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="全不选">
<input type="button" id="btn3" value="反选">
<input type="button" id="btn4" value="选中所有奇数">
<input type="button" id="btn5" value="获得选中的所有值">
Copier après la connexion

sont implémentés respectivement Le code complet des fonctions concernées est le suivant :

$(function(){
  $(&#39;#btn1&#39;).click(function(){//全选
    $("[name=&#39;fruit&#39;]").attr(&#39;checked&#39;,&#39;true&#39;);
  });
  $(&#39;#btn2&#39;).click(function(){//全不选
    $("[name=&#39;fruit&#39;]").removeAttr(&#39;checked&#39;);
  });
  $(&#39;#btn3&#39;).click(function(){//反选
    $("[name=&#39;fruit&#39;]").each(function(){
      if($(this).attr(&#39;checked&#39;)){
        $(this).removeAttr(&#39;checked&#39;);
      }else{
        $(this).attr(&#39;checked&#39;,&#39;true&#39;);
      }
    })
  });
  $("#btn4").click(function(){//选中所有奇数
    $("[name=&#39;fruit&#39;]:even").attr(&#39;checked&#39;,&#39;true&#39;);
  })
  $("#btn5").click(function(){//获取所有选中的选项的值
    var checkVal=&#39;&#39;;
    $("[name=&#39;fruit&#39;][checked]").each(function(){
      checkVal+=$(this).val()+&#39;,&#39;;
    })
    alert(checkVal);
  })
});
Copier après la connexion

Notez que le package jquery doit être introduit avant d'utiliser jquery !

Ce qui précède est le code que l'éditeur a travaillé dur pour compiler. Est-il très pratique à utiliser ? J'espère qu'il pourra aider tout le monde.

Pour plus d'articles sur l'implémentation des fonctions de sélection de tout, d'inversion et de désélection de cases basées sur jquery, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal