自定义胶囊按钮

效果图

html

<a href="javascript:;" class="capbtn ">
    <i class="left-circle"></i>
</a>

css

      .capbtn{
            display: inline-block;
            height: 20px;
            width: 40px;
            position: relative;
            border-radius: 20px;
            background-color: rgb(215, 216, 218);
        }
        .check{
            background-color: rgb(23, 230, 23);
        }
        .capbtn>.left-circle{
            position: absolute;
            display: inline-block;
            width: 17px;
            height: 80%;
            border-radius: 50%;
            left: 2px;
            top: 2px;
            background-color: #fff;
        }
        .capbtn>.right-circle{
            position: absolute;
            right: 2px;
            top: 2px;
            display: inline-block;
            width: 17px;
            height: 80%;
            border-radius: 50%;        
            background-color: #fff;
        }

js

<script src="./js/jquery-3.4.1.min.js"></script>
<script>
    $(".capbtn").click(function(){
        $(this).toggleClass("check");
        $(this).children("i").toggleClass("left-circle right-circle");
    })
</script>

后语

向后台传递选中状态时，只需让其关联一个隐藏的表单元素，通过设置这个表单value，而后台只需根据这个隐藏的表单元素的name属性即可获得该字段。