JS 实现全选框

原创 2019-02-15 16:03:51 423
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JS实现全选</title><style type="text/css">    &

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">


<title>JS实现全选</title>

<style type="text/css">

        .box{width: 200px;height: 200px;padding: 5px 10px;margin: 20px auto;}

        .box div{border-bottom: 1px solid pink;}

        .box input{margin: 8px;}

</style>


<script type="text/javascript">

        function Getall(){

            var GetAll,Item;

            GetAll = document.getElementById('checkall')

            Item = document.getElementsByName('item[]')

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

                if(GetAll.checked){

                Item[i].checked=true

                }else{

                Item[i].checked=false

                }

            }

        }

</script>

</head>

<body>

    <div class="box">

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

        </div>

        <input type="checkbox" name="item[]">选项1<br>

        <input type="checkbox" name="item[]">选项2<br>

        <input type="checkbox" name="item[]">选项3<br>

    </div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-02-15 16:15:24
老师总结:name="item[]", 这个值是给php用的, 如果仅仅是前端用, 可以不用这个名称, 其实这个变量中可以有索引, name="item['key'], 也是可以的, 这样更直观,且与顺序无关了

发布手记

热门词条