Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung verschiedener einfacher Anwendungsbeispiele für das Kontrollkästchen zum Betrieb von JQuery

Ausführliche Erläuterung verschiedener einfacher Anwendungsbeispiele für das Kontrollkästchen zum Betrieb von JQuery

伊谢尔伦
Freigeben: 2017-07-19 13:45:34
Original
1835 Leute haben es durchsucht

Eine einfache Beispieldemonstration für die Verwendung von Kontrollkästchen in JQuery. Ich hoffe, dass sie für das Lernen aller hilfreich ist.

1. Alle auswählen


$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
})
Nach dem Login kopieren

2.


$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
})
Nach dem Login kopieren

3. Wählen Sie alle ungeraden Zahlen


$("#btn3").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
})
Nach dem Login kopieren

4. Alle geraden Zahlen auswählen


$("#btn6").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
})
Nach dem Login kopieren

5


$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
})
Nach dem Login kopieren
oder



$("#invert").click(function(){
  $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
   $(o).attr("checked",!$(o).attr("checked"));
  });
 });
Nach dem Login kopieren

6. Holen Sie sich das Wert der Auswahl


var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
})
Nach dem Login kopieren

7. Durchlaufen Sie ausgewählte Elemente


$("input[type=checkbox][checked]").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});
Nach dem Login kopieren
Das folgende Beispiel beschreibt die Implementierung von jquery zum Auswählen aller, zum Umkehren der Auswahl und zum Abrufen aller ausgewählten Kontrollkästchen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:


Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung verschiedener einfacher Anwendungsbeispiele für das Kontrollkästchen zum Betrieb von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage