页面开关效果以及接受/传递参数(自用)

效果图:

HTML:

                            <div class="col-sm-3"></div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">应急消防管理 <i
                                            class="text-danger"></i>：
                                    </label>
                                    <div class="col-sm-8">
                                        <label class="switch">
                                            <input type="hidden" id="fireControl" name="fireControl" th:value="${baseParamsDO.fireControl}"/>
                                            <input type="checkbox" id="fireControlShow" th:value="${baseParamsDO.fireControl}" onclick="changeFireControl()">
                                            <div class="slider round"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>


                            <div class="col-sm-3"></div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">基础数据库 <i
                                            class="text-danger"></i>：
                                    </label>
                                    <div class="col-sm-8">
                                        <label class="switch">
                                            <input type="hidden" id="dataBase" name="dataBase" th:value="${baseParamsDO.dataBase}"/>
                                            <input type="checkbox" id="dataBaseShow" th:value="${baseParamsDO.dataBase}" onclick="changeDataBase()">
                                            <div class="slider round"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>

CSS

.switch {
        /* 定义position为relative，子元素的absolute在这里作参照 */
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch input {
        /* 隐藏input的显示 */
        display: none;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        /* 撑满外层的div标签 */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        /* 设置显示时候的动画 */
        -webkit-transition: .4s;
        transition: .4s;
    }
    /* 设置子div前面的元素 */

    .slider:before {
        position: absolute;
        /* before的内容为空白 */
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        /* 设置按钮点击的时候的动画效果 */
        -webkit-transition: .4s;
        transition: .4s;
    }
    /* 两个属性同时存在的时候的css样式 */

    input:checked+.slider {
        background-color: #00ff64;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #00ff64;
    }
    /* 设置before元素的平移动画 */

    input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    /* 设置下面一组按钮的圆角 */

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

JS:

function changeDataBase(){
	let a = document.getElementById("dataBaseShow")
	if(a.checked == true){
		$("#dataBase").val(1);
	}else if(a.checked == false){
		$("#dataBase").val(0);
	}
}

function changeFireControl(){
	let b = document.getElementById("fireControlShow")
	if(b.checked == true){
		$("#fireControl").val(1);
	}else if(b.checked == false){
		$("#fireControl").val(0);
	}
}

$(function() {
	var fireControl= $("#fireControlShow").val();
	var dataBase = $("#dataBaseShow").val();
	if(fireControl == 1){
		$("#fireControlShow").prop("checked","checked")
	}else {
		$("#fireControlShow").prop("checked","")
	}

	if(dataBase == 1){
		$("#dataBaseShow").prop("checked","checked")
	}else {
		$("#dataBaseShow").prop("checked","")
	}
});