Rumah > hujung hadapan web > tutorial js > jquery如何判断checkbox(复选框)是否被选中?(源代码)

jquery如何判断checkbox(复选框)是否被选中?(源代码)

云罗郡主
Lepaskan: 2018-10-29 14:24:40
ke hadapan
6005 orang telah melayarinya

jquery如何判断checkbox(复选框)?相信有很多刚刚接触jquery的朋友都会有这样的疑问。本章就给大家介绍jquery如何判断checkbox(复选框)是否被选中。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

谁都知道在html如果一个复选框被选中是checked="checked"。但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked。所以很多朋友判断 if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr("checked")==true)。

例子里面包括了一下几个功能:

1

2

3

4

5

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

Salin selepas log masuk

代码:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

    <TITLE> New Document </TITLE>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></script>

        <SCRIPT LANGUAGE="JavaScript">

           $("document").ready(function(){

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

                  $("[name=&#39;checkbox&#39;]").attr("checked",&#39;true&#39;);//全选

    

              });

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

                  $("[name=&#39;checkbox&#39;]").removeAttr("checked");//取消全选

    

              });

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

                  $("[name=&#39;checkbox&#39;]:even").attr("checked",&#39;true&#39;);//选中所有奇数

    

              })

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

                  $("[name=&#39;checkbox&#39;]").each(function(){

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

                  {

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

      

                  }

                  else

                  {

                      $(this).attr("checked",&#39;true&#39;);

      

                  }

              })

          })

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

              var str="";

              $("[name=&#39;checkbox&#39;][checked]").each(function(){

               str+=$(this).val()+""r"n";

             //alert($(this).val());

              })

             alert(str);

              })

   })

  </SCRIPT>

 </HEAD>

 <BODY>

 <form name="form1" method="post" action="">

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

   <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

 </form>

Salin selepas log masuk

以上就是对jquery如何判断checkbox(复选框)是否被选中的全部介绍,如果您想了解更多有关JavaScript视频教程,请关注PHP中文网。


Atas ialah kandungan terperinci jquery如何判断checkbox(复选框)是否被选中?(源代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan