Einfache Beispieldemonstration zur Verwendung des Kontrollkästchens in jquery_jquery

Teilen Sie einen auf jQuery basierenden Code mit, der die Funktionen zum Auswählen aller, Invertieren und Abwählen der Kontrollkästchenliste implementiert. Er eignet sich für Szenarien, in denen nach mehreren Auswahlen auf einer Webseite Stapelvorgänge erforderlich sind (z. B. Stapellöschen). , usw.). Der Artikel kombiniert Beispiele mit prägnantem Code und deckt grundsätzlich alle Aspekte der Optionsauswahl ab. Ich hoffe, er kann Front-End-Entwicklungsbegeisterten in Not helfen.

Einführung in die JQuery-Bibliothek

HTML erstellen

Im Allgemeinen müssen aus der Datenbank gelesene Listen stapelweise zum Löschen und Bearbeiten ausgewählt werden. Lassen Sie uns unten simulieren, ob alle Kontrollkästchen aktiviert werden sollen oder nicht.

<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">

jQuery-Code

1. Wählen Sie „Alle“ oder „Keine“ aus. Wenn das Kontrollkästchen #all neben der Schaltfläche „Alle auswählen“ aktiviert ist, werden alle Optionen in der Liste ausgewählt. Andernfalls sind alle Optionen in der Liste deaktiviert.

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

2. Alles auswählen. Wenn Sie auf die Schaltfläche „Alle auswählen“ #selectAll klicken oder das Kontrollkästchen #all neben der Schaltfläche „Alle auswählen“ aktivieren, werden alle Optionen in der Liste ausgewählt, einschließlich des Kontrollkästchens neben „Alle auswählen“.

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

3. Wählen Sie „Keine“ aus. Wenn Sie auf die Schaltfläche #unSelect klicken, werden alle Optionen in der Liste deaktiviert, einschließlich #all.

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

4. Zählerauswahl. Wenn Sie auf die Schaltfläche „Auswahl umkehren“ #reverse klicken, werden alle ausgewählten Optionen in der Liste deaktiviert und alle nicht ausgewählten Optionen werden ausgewählt. Natürlich sollten Sie auch auf den Status von #all achten.

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

Der Code durchläuft die Optionsliste, ändert dann das geprüfte Attribut und ruft schließlich die Funktion allchk() auf, die später vorgestellt wird.

5. Alle ausgewählten Werte abrufen. Wenn wir mit dem Hintergrundprogramm interagieren möchten, müssen wir den Wert des ausgewählten Elements in der Liste abrufen. Wir durchlaufen das Array, speichern den Wert des ausgewählten Elements im Array und bilden schließlich eine Zeichenfolge Durch Kommas (,) getrennt. Entwickler können entsprechende Vorgänge ausführen, indem sie diese Zeichenfolge abrufen.

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

Um die Funktion der ausgewählten Optionen zu verbessern, wird #all entsprechend ausgewählt, wenn wir auf eine Option in der Liste klicken, wenn alle ausgewählten Elemente ausgewählt sind im Voraus: Wenn eine Option ausgewählt und deaktiviert ist, wird auch #all entsprechend deaktiviert.

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

Die Funktion allchk() wird verwendet, um zu erkennen, ob das All-Select-Feld #all ausgewählt oder nicht ausgewählt werden soll. Bitte beachten Sie den 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); 
 } 
}

Zusammenfassung

jQuery verwaltet den aktivierten und nicht aktivierten Status des Kontrollkästchens sehr einfach. Verwenden Sie attr(), um den Wert des Attributs „aktiviert“ festzulegen, und achten Sie darauf, alle Auswahlen und umgekehrten Auswahlen zu behandeln den gesamten Prozess. Wählen Sie den aktivierten Status des Kontrollkästchens aus und erhalten Sie den Wert der ausgewählten Option. Nachfolgend habe ich den gesamten jQuery-Code als Referenz zusammengestellt.

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

Ich hoffe, dass Sie durch diesen Artikel ein allgemeines Verständnis für die Verwendung von Kontrollkästchen in JQuery erlangen und anschließend die Verwendung von Kontrollkästchen anhand einer großen Anzahl von Beispielen kompetent beherrschen.