返回使用JavaS......登陆

使用JavaScript实现全选(全不选)按钮

阿超2019-05-03 14:23:51372

有如下案例,使用JavaScript实现全选(全不选)按钮。
这个按钮在实际开发中也是很常用的,源码附上 

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

  <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>多选框练习</title>

    </head>

    <body>

      

    <input type="checkbox" id="n2" onclick="set();"/>全选/全不选<br/><hr/>

      

    <input type="checkbox" name="nn" />羽毛球<br/>

    <input type="checkbox" name="nn" />蓝球<br/>

    <input type="checkbox" name="nn" />橄榄球<br/>

    <input type="checkbox" name="nn" />乒乓球<br/>

    <input type="checkbox" name="nn" />足球<br/>

    <input type="checkbox" name="nn" />棒球<br/><hr/>

      

      

    <input type="button" value="全选" onclick="setAll();" />

    <input type="button" value="全不选" onclick="setNone();" />

    <input type="button" value="反选" onclick="setBack();" />

    <script type="text/javascript">

      

      

        function setAll() {

            var a=document.getElementsByName("nn");//先获取input多选框

            //获取的a是个数组,遍历这个数组,设置checked属性

            for(var i=0;i<a.length;i++){

                a[i].checked=true;//checked为true时是选中,false时是未选中

            }

        }

        function setNone() {

            var a=document.getElementsByName("nn");

            for(var i=0;i<a.length;i++){

                a[i].checked=false;

            }

        }

        function setBack() {

            var c=document.getElementsByName("nn");

            for(var i=0;i<c.length;i++){

                if(c[i].checked==true){

                    c[i].checked=false;

                }

                else{

                    c[i].checked=true;

                }

            }

        }

        function set() {

            var d=document.getElementById("n2");

            if(d.checked==true){

                setAll();//直接调用已有的方法,设置checked属性

            }

            else{

                setNone();

            }

        }

      

    </script>

      

    </body>

    </html>

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送