css自定义表单复选框

最新推荐文章于 2022-09-20 21:43:47 发布

杀猪刀-墨林

最新推荐文章于 2022-09-20 21:43:47 发布

阅读量275

点赞数

分类专栏： JS基础编程文章标签： css 自定义复选框 js列表推送勾选信息

本文链接：https://blog.csdn.net/qq_38948398/article/details/112170741

版权

JS基础编程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>推送表单信息</title>
    <style>
        ul,li{
            list-style: none;
            display: inline-block;
            padding: .3rem
        }
        .box{width: 300px;height: 300px;border: 1px solid red;text-align: center}
        span{
            display: inline-block;
            vertical-align: middle;
            width: 2.4rem;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
        }
        ul li input{display: none}
        ul li input + label{
            background-color: white;
            border:1px solid #08cac2;
            width:.8rem;
            height:.8rem;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: .5rem;
            border-radius: 50%;
        }
        ul li input:checked + label{
            background-color: #eee;
        }
        ul li input:checked + label:after{
            content:"\2714";
            color: #08cac2;
        }
        input[type="button"]{
            width: 2.9rem;
            text-align: center;
            border: none;
            color: white;
            height: 1.5rem;
            line-height: 1.5rem;
            margin-top: 3.4rem;
            background-color: #96e2e2;
            border-radius: .2rem;
            box-shadow: 0px .2rem 1rem #ccf0f0;
        }
    </style>
</head>
<body>
    
    <form action="" id="box" class="box">
        <small>通讯录</small>
        <ul>
            <li>
                <span>张萌</span>
                <input type="checkbox" id="fx1">
                <label for="fx1"></label>
            </li>
            <li>
                <span>李子雯</span>
                <input type="checkbox" id="fx2">
                <label for="fx2"></label>
            </li>
            <li>
                <span>朱杰</span>
                <input type="checkbox" id="fx3">
                <label for="fx3"></label>
            </li>
            <li>
                <span>黄雨露</span>
                <input type="checkbox" id="fx4">
                <label for="fx4"></label>
            </li>
            <li>
                <span>柯惠</span>
                <input type="checkbox" id="fx5">
                <label for="fx5"></label>
            </li>
            <li>
                <span>徐倩</span>
                <input type="checkbox" id="fx6">
                <label for="fx6"></label>
            </li>
            <li>
                <span>王木木</span>
                <input type="checkbox" id="fx7">
                <label for="fx7"></label>
            </li>
            <li>
                <span>吴宇</span>
                <input type="checkbox" id="fx8">
                <label for="fx8"></label>
            </li>
            <li>
                <span>余宇萧</span>
                <input type="checkbox" id="fx9">
                <label for="fx9"></label>
            </li>
            <li>
                <span>王胖胖</span>
                <input type="checkbox" id="fx10">
                <label for="fx10"></label>
            </li>
            <li>
                <span>阮珍</span>
                <input type="checkbox" id="fx11">
                <label for="fx11"></label>
            </li>
            <li>
                <span>陈沐</span>
                <input type="checkbox" id="fx12">
                <label for="fx12"></label>
            </li>
        </ul>
        <input type="button" value="确认" onclick="sub()"/>
    </form>
    <h3 id="text">请选择接收人</h3>
</body>
</html>
<script>
    var inps = document.getElementsByTagName('input');
    var chooce = document.getElementById('text');
    for(var i=0;i<inps.length-1;i++){
        inps[i].index = i;
        inps[inps[i].index].onclick=function () {
            if(this.getAttribute('checked')==null){
                this.setAttribute('checked','checked')
            }else{
                this.setAttribute('checked',false);
            };
        }    
    }
    function sub() {
        // 最终显示文本
        var text='',txt=[];
        for(var i=0;i<inps.length-1;i++) {
            // 选中状态
            if (inps[inps[i].index].getAttribute('checked') == 'checked') {     
                text = inps[i].parentNode.getElementsByTagName('span')[0].innerText;
                txt.splice(i, 0, text.substr(inps[i].parentNode.getElementsByTagName('span')[0].innerText, 9));
            }else{
                inps[inps[i].index].removeAttribute('checked')
            }   
        }
        if(chooce.innerText==""){
            chooce.innerHTML = "请选择接收人";
        }else{
            chooce.innerHTML =txt.join(' ');
            if(chooce.innerHTML==""){
                chooce.innerHTML = "请选择接收人";
            }
        }
    }


</script>

杀猪刀-墨林

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css自定义表单复选框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>...
复制链接

扫一扫