返回js实现全选...登陆

js实现全选

关志宇2019-05-28 09:42:18215

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>全选</title>

</head>

<style type="text/css">

    .box{width:100px;height:250px;border:1px solid #ccc; border-radius:10px;margin:20px auto;text-align:center;padding:5px 10px;} 

    .box div{border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom: 8px;}

    .box input{margin:8px;}   

</style>

<body>

    <div>

        <div>

           <input type="checkbox" id="checkall" onclick="checkAll()"><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>

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

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

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

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

    </div>

</body>

<script>

    function checkAll(){

        var checkall,item;

        checkall = document.getElementById('checkall');

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

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

            if(checkall.checked){

                item[i].checked = true;

            }else{

                item[i].checked = false;

            }

        }

    }

</script>

</html>


最新手记推荐

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

全部回复(0)我要回复

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