Maison > interface Web > js tutoriel > Implémenter des fonctions telles que la sélection de toutes les cases à cocher, l'inversion des sélections et la désélection d'aucune en fonction de jquery_jquery

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

WBOY
Libérer: 2016-05-16 15:36:26
original
1258 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 (tout sélectionner, inverser la sélection, 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

Le code complet pour implémenter respectivement les fonctions pertinentes est le suivant :

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

Notez que vous devez importer le package jquery avant d'utiliser jquery !

Ce ci-dessus 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.

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