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

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="获得选中的所有值"> 

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); 
  }) 
}); 

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.