Heim > Web-Frontend > js-Tutorial > jquery implementiert alle Auswahlen, kehrt die Auswahl um und ruft alle ausgewählten Kontrollkästchen ab_jquery

jquery implementiert alle Auswahlen, kehrt die Auswahl um und ruft alle ausgewählten Kontrollkästchen ab_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-05-16 15:28:26
Original
1560 Leute haben es durchsucht

Ich habe 7 verschiedene Kontrollkästchenstatus vergeben und sie nacheinander mit Ihnen geteilt.

1. Alles auswählen

1

2

3

$("#btn1").click(function(){

$("input[name='checkbox']").attr("checked","true");

})

Nach dem Login kopieren

2. Alle Auswahlen aufheben (keine auswählen)

1

2

3

$("#btn2").click(function(){

$("input[name='checkbox']").removeAttr("checked");

})

Nach dem Login kopieren

3. Wählen Sie alle ungeraden Zahlen aus

1

2

3

$("#btn3").click(function(){

$("input[name='checkbox']:odd").attr("checked","true");

})

Nach dem Login kopieren

4. Wählen Sie alle geraden Zahlen aus

1

2

3

$("#btn6").click(function(){

$("input[name='checkbox']:even").attr("checked","true");

})

Nach dem Login kopieren

5. Gegenwahl

1

2

3

4

5

6

7

8

9

10

11

12

$("#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

1

2

3

4

5

$("#invert").click(function(){

  $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){

   $(o).attr("checked",!$(o).attr("checked"));

  });

 });

Nach dem Login kopieren

6. Ermitteln Sie den Wert des ausgewählten Artikels

1

2

3

4

5

6

7

8

var aa="";

$("#btn5").click(function(){

$("input[name='checkbox']:checkbox:checked").each(function(){

aa+=$(this).val()

})

document.write(aa);

})

})

Nach dem Login kopieren

7. Durchqueren Sie ausgewählte Elemente

1

2

3

4

$("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 Elemente, 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 sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<title>无标题页</title>

<script src="js/jquery-1.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(function($){

//全选

$("#btn1").click(function(){

$("input[name='checkbox']").attr("checked","true");

})

//取消全选

$("#btn2").click(function(){

$("input[name='checkbox']").removeAttr("checked");

})

//选中所有基数

$("#btn3").click(function(){

$("input[name='checkbox']:even").attr("checked","true");

})

//选中所有偶数

$("#btn6").click(function(){

$("input[name='checkbox']:odd").attr("checked","true");

})

//反选

$("#btn4").click(function(){

$("input[name='checkbox']").each(function(){

if($(this).attr("checked"))

{

$(this).removeAttr("checked");

}

else

{

$(this).attr("checked","true");

}

})

})

//或许选择项的值

var aa="";

$("#btn5").click(function(){

$("input[name='checkbox']:checkbox:checked").each(function(){

aa+=$(this).val()

})

document.write(aa);

})

})

</script>

  

  

<form id="form1" runat="server">

<div>

<input type="button" id="btn1" value="全选">

<input type="button" id="btn2" value="取消全选">

<input type="button" id="btn3" value="选中所有奇数">

<input type="button" id="btn6" value="选中所有偶数">

<input type="button" id="btn4" value="反选">

<input type="button" id="btn5" value="获得选中的所有值">

<br>

<input type="checkbox" name="checkbox" value="checkbox1">

checkbox1

<input type="checkbox" name="checkbox" value="checkbox2">

checkbox2

<input type="checkbox" name="checkbox" value="checkbox3">

checkbox3

<input type="checkbox" name="checkbox" value="checkbox4">

checkbox4

<input type="checkbox" name="checkbox" value="checkbox5">

checkbox5

<input type="checkbox" name="checkbox" value="checkbox6">

checkbox6

<input type="checkbox" name="checkbox" value="checkbox7">

checkbox7

<input type="checkbox" name="checkbox" value="checkbox8">

checkbox8

</div>

</form>

Nach dem Login kopieren

Das Obige ist eine einfache Beispieldemonstration für die Verwendung von Kontrollkästchen in JQuery. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Verwandte Etiketten:
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