返回js全选案例...登陆

js全选案例

小毛2019-04-13 13:45:28267

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>全选案例</title>

    <style>

        *{margin: 0;padding: 0;}

        h2{margin: 0 auto;width: 600px;text-align: center}

        #box{width: 100px;line-height: 30px;margin: 100px auto;border:1px solid black;text-align: center;}

        .checkAll{background: black;color: white;line-height: 50px;}

    </style>

</head>

<body>

    <h2>全选案例</h2><hr>

    <div id="box">

        <div class="checkAll"><input type="checkbox" id="checkAll" onclick="checkAll()" ><label for="checkAll">全选</label></div>

        <div class="item">

            <input type="checkbox" name="item[]">桃子<br>

            <input type="checkbox" name="item[]">栗子<br>

            <input type="checkbox" name="item[]">草莓<br>

            <input type="checkbox" name="item[]">香蕉<br>

        </div>

    </div>

</body>

<script>

    function checkAll(){

        var checkall, item;

        checkall = document.getElementById("checkAll");

        item = document.getElementsByName("item[]");

        if(checkall.checked){

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

                item[i].checked=true;

            }

        }else{

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

                item[i].checked=false;

            }

        }

    }

</script>

</html>

思路:onclick调用checkAll方法

与vip视频中的差别在于:先判断再循环赋值,减少运算次数

最新手记推荐

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

全部回复(0)我要回复

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