码迷,mamicode.com
首页 > 其他好文 > 详细

关于 checkbox 的一些操作

时间:2018-06-26 16:10:51      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:col   back   nsf   display   padding   transform   import   ber   border   

获取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;
    }
    

 

关于 checkbox 的一些操作

标签:col   back   nsf   display   padding   transform   import   ber   border   

原文地址:https://www.cnblogs.com/duanzb/p/9229196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!