原生写switch开关，jsp页面与后端交互

效果如图：

css

 .switch {
            width: 57px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }

        .switch:before {
            content: '';
            width: 26px;
            height: 26px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }

        .switch:checked {
            border-color: #409eff;
            box-shadow: #409eff 0 0 0 16px inset;
            background-color: #409eff;
        }

        .switch:checked:before {
            left: 30px;
        }

        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }

        .switch.switch-anim:before {
            transition: left 0.3s;
        }

        .switch.switch-anim:checked {
            box-shadow: #409eff 0 0 0 16px inset;
            background-color: #409eff;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }

        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }

html

<div class="form-control">
     <input class="switch switch-anim" onchange="checkNum()" type="checkbox"value="1" name="pwdSwitch"   id="pwdSwitch" />
</div>

js

function checkNum() {
            if ($('#pwdSwitch').prop('checked')) {
                console.log("选中");
                $('#pwdSwitch').prop('defaultValue','1')
            } else {
                console.log("没选中");
                $('#pwdSwitch').prop('defaultValue','-1')
            }
        }

这是个前后端不分离的项目，可以选择用插件来写，也可以选择jQuery加css来实现，只要能达成效果就行