返回全选,选中与清......登陆

全选,选中与清除效果

0基*2019-04-13 20:53:25192

这节学习了全选内容

<html>
    <head>
        <meta charset="UTF-8">
        <title>全選</title>
        <style>
            .box{
                width:120px;
                height:250px;
                border:1px solid #000;
                border-radius:5px;
                padding:5px 10px;
                margin:20px auto;
               
            }
            .box div{
                border-bottom:1px solid #000;
                padding-bottom:10px;
                margin-bottom:8px;
            }
            .box intpu{
                margin:8px;
            }
        </style>
        <script type='text/javascript'>
            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>
    </head>
    <body>
        <div class='box'>
            <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>
        </div>
    </body>
</html>

最新手记推荐

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

全部回复(0)我要回复

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