Exemple simple de démonstration de la façon d'utiliser la case à cocher dans jquery_jquery

Partagez avec vous un morceau de code basé sur jQuery qui implémente les fonctions de sélection de tout, d'inversion et de désélection de la liste des cases à cocher. Il convient aux scénarios où des opérations par lots sont nécessaires après plusieurs sélections sur une page Web (comme la suppression par lots). , etc.). L'article combine des exemples avec un code concis et couvre essentiellement tous les aspects des opérations de sélection d'options. J'espère qu'il pourra aider les passionnés de développement front-end dans le besoin.

Présentation de la bibliothèque jquery

Construire du HTML

Généralement, les listes lues dans la base de données doivent être sélectionnées par lots pour être supprimées et modifiées. Simulons-le ci-dessous pour savoir s'il faut cocher ou non toutes les cases.

<ul id="list"> 
 <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
 <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> 
 <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li> 
 <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
 <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
 <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll"> 
<input type="button" value="全不选" class="btn" id="unSelect"> 
<input type="button" value="反选" class="btn" id="reverse"> 
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

Code jQuery

1. Sélectionnez tout ou rien. Lorsque la case #all à côté du bouton Sélectionner tout #selectAll est cochée, toutes les options de la liste sont sélectionnées. Sinon, toutes les options de la liste sont décochées.

$("#all").click(function(){ 
 if(this.checked){ 
  $("#list :checkbox").attr("checked", true); 
 }else{ 
  $("#list :checkbox").attr("checked", false); 
 } 
});

2. Sélectionnez tout. Lorsque vous cliquez sur le bouton Sélectionner tout #selectAll ou cochez la case #all à côté du bouton Sélectionner tout, toutes les options de la liste seront sélectionnées, y compris la case à cocher à côté de Sélectionner tout.

$("#selectAll").click(function () { 
 $("#list :checkbox,#all").attr("checked", true); 
});

3. Ne sélectionnez aucun. Lorsque vous cliquez sur le bouton #unSelect, toutes les options de la liste sont désélectionnées, y compris #all.

$("#unSelect").click(function () { 
 $("#list :checkbox,#all").attr("checked", false); 
});

4. Sélection du compteur. Lorsque vous cliquez sur le bouton de sélection inversée #reverse, toutes les options sélectionnées dans la liste deviendront désélectionnées et toutes les options non sélectionnées deviendront sélectionnées. Bien sûr, vous devez également faire attention à l'état de #all.

$("#reverse").click(function () { 
 $("#list :checkbox").each(function () { 
  $(this).attr("checked", !$(this).attr("checked")); 
 }); 
 allchk(); 
});

Le code parcourt la liste d'options, puis modifie l'attribut vérifié, et enfin appelle la fonction allchk(), qui sera introduite plus tard.

5. Obtenez toutes les valeurs sélectionnées. Si nous voulons interagir avec le programme en arrière-plan, nous devons obtenir la valeur de l'élément sélectionné dans la liste. Nous parcourons le tableau, stockons la valeur de l'élément sélectionné dans le tableau et formons enfin une chaîne. séparés par des virgules (,). Les développeurs peuvent effectuer les opérations correspondantes en obtenant cette chaîne.

$("#getValue").click(function(){ 
 var valArr = new Array; 
 $("#list :checkbox[checked]").each(function(i){ 
  valArr[i] = $(this).val(); 
 }); 
 var vals = valArr.join(',');//转换为逗号隔开的字符串 
 alert(vals); 
});

Afin d'améliorer la fonction des options sélectionnées, lorsque nous cliquons sur une option dans la liste, si l'élément coché remplit toutes les conditions sélectionnées, #all sera également sélectionné en conséquence. De même, si tous les éléments sélectionnés sont sélectionnés. à l'avance, lorsqu'une option est sélectionnée et lorsqu'une option est décochée, #all deviendra également décoché en conséquence.

//设置全选复选框 
$("#list :checkbox").click(function(){ 
 allchk(); 
});

La fonction allchk() est utilisée pour détecter si la case de sélection de tout #all doit être sélectionnée ou désélectionnée. Veuillez consulter le code.

function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

Résumé

jQuery exploite le statut coché et non coché de la case à cocher très simplement. Utilisez attr() pour définir la valeur de l'attribut "checked". True est décoché, false est décoché. Faites attention à la gestion de toutes les sélections et sélections inverses. l'ensemble du processus. Sélectionnez l'état coché de la case et obtenez la valeur de l'option sélectionnée. Ci-dessous, j'ai compilé tout le code jQuery pour votre référence.

$(function () { 
 //全选或全不选 
 $("#all").click(function(){ 
  if(this.checked){ 
   $("#list :checkbox").attr("checked", true); 
  }else{ 
   $("#list :checkbox").attr("checked", false); 
  } 
  }); 
 //全选 
 $("#selectAll").click(function () { 
   $("#list :checkbox,#all").attr("checked", true); 
 }); 
 //全不选 
 $("#unSelect").click(function () { 
   $("#list :checkbox,#all").attr("checked", false); 
 }); 
 //反选 
 $("#reverse").click(function () { 
   $("#list :checkbox").each(function () { 
    $(this).attr("checked", !$(this).attr("checked")); 
   }); 
   allchk(); 
 }); 
  
 //设置全选复选框 
 $("#list :checkbox").click(function(){ 
  allchk(); 
 }); 
 
 //获取选中选项的值 
 $("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
   valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(','); 
   alert(vals); 
 }); 
}); 
function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

Grâce à cet article, j'espère que vous aurez une compréhension générale de la façon d'utiliser la case à cocher dans jquery, puis que vous maîtriserez efficacement l'utilisation de la case à cocher à travers un grand nombre d'exemples.