html多选框，全选和全不选功能

顺晟科技
2022-09-15 22:27:23
135
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
/*浏览器格式化，消除页面预留空间*/
    *{
        margin: 0;
        padding: 0;
       }
        /*适应各种浏览器屏幕尺寸*/
    body{
        width: 100%;
        height: 100%;
        /*设置页面字体大小*/
        font-size: 14px;
        }
    /*列表内元素垂直居中*/
    label,input,a{vertical-align:middle;}
    /*给选项表示设置内边距*/
    label{padding:0 10px 0 5px;}
    /*给列表设置边框*/
    dl{
         width: 120px;
         /*元素水平居中*/
         margin: 10px auto;
         border: 1px solid #666;
         /*设置边框圆角*/
         border-radius: 5px;
         background: #fafafa;
         padding: 10px 5px;        
        }
    /*消除链接下划线，设置链接字体颜色*/
    a{
         text-decoration: none;
         color: #09f;
        }
    /*鼠标指针浮动在链接上时，样式改变:字体变红色*/
    a:hover{
         color: red;
        }
    dt{
         /*下边框*/
         border-bottom: 1px solid black;
         /*距离底部内边距*/
         padding-bottom: 10px;
        }
        /*标示字体加粗*/
    dt label{
         font-weight: 700;
        }
        /*各个选项距离顶部外边距*/
    p{
         margin-top: 10px;
        }<br></style>
<body>
    <dl class="checkBox">
        <dt><input type="checkbox" id="checkAll" onclick="checkAll()">
            <label>全选</label>
            <a href="javascript:;">反选</a>
        </dt>
        <dd>
            <p><input type="checkbox" name="item[]"><label>选项1</label></p>
            <p><input type="checkbox" name="item[]"><label>选项2</label></p>
            <p><input type="checkbox" name="item[]"><label>选项3</label></p>
            <p><input type="checkbox" name="item[]"><label>选项4</label></p>
            <p><input type="checkbox" name="item[]"><label>选项5</label></p>
            <p><input type="checkbox" name="item[]"><label>选项6</label></p>
            <p><input type="checkbox" name="item[]"><label>选项7</label></p>
            <p><input type="checkbox" name="item[]"><label>选项8</label></p>
        </dd>
    </dl>
    <center>1、切换全选全不选文字2、根据选中个数更新全选框状态</center>
</body>
<script>
    function checkAll(){
        //1.获取编号前面的复选框
        var checkAllEle = document.getElementById("checkAll");
        //2.对编号前面复选框的状态进行判断
        if(checkAllEle.checked==true){
            //3.获取下面所有的复选框
            var checkOnes = document.getElementsByName("item[]");
            //4.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //5.拿到每一个复选框，并将其状态置为选中
                checkOnes[i].checked=true;
            }
        }else{
            //6.获取下面所有的复选框
            var checkOnes = document.getElementsByName("item[]");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //8.拿到每一个复选框，并将其状态置为未选中
                checkOnes[i].checked=false;
            }
        }
    }
</script>

</html>
html多选框，全选和全不选功能
上一篇：html中的table在androi 下一篇：html表单中固定大小,超出则用滚动
网站建设

Html

html多选框，全选和全不选功能
