关于 checkbox 的一些操作

Posted 2020-11-20 duanzb

获取checkbox选中的状态

$("#checkbox").is(":checked");

设置 checkbox 的状态

$("#checkbox").attr("checked", true);//设置为选中状态
$("#checkbox").attr("checked", false);//设置为未选中状态

用css对checkbox进行样式修饰

这是效果图

<div class="checkbox" style="height: 21px;">
                <input id="remember" type="checkbox" name="">
                <label for="remember"></label>
            </div>

.checkbox {
        height: 21px;
        line-height: 21px;
        font-size: 13px;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    .checkbox input[type="checkbox"] {
        opacity: 0;
        z-index: 1;
        width: 20px;
        height: 20px;
    }
    .checkbox label {
        display: inline-block;
        position: relative;
        padding-left: 5px;
    }
    .checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 18px;
        height: 18px;
        left: -13px;
        top: -13px;
        margin-left: -14px;
        border: 1px solid #cccccc;
        border-radius: 3px;
        -webkit-transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
        -o-transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
        transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
    
    }
    
    .checkbox label::after {
        content: ‘‘;
        position: absolute;
        left: -21px;
        top: -12px;
        width: 6px;
        height: 12px;
        border: 0;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
        -o-transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
        transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
    }
    .checkbox input[type="checkbox"]:checked + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        background-color: #4d8bfc;
        border-color: #4d8bfc;
    }
    
    .checkbox input[type="checkbox"]:checked + label::after {
           background-color: #4d8bfc;
    }