Question

我尝试使用css和jquery制作一些基本的自定义复选框。我有这段代码：

 <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">       </script>

    <style>

        input[type="checkbox"]{
        /*display:none;*/
        }
        .label .checkbox{
        width:25px;
        height:25px;
        background-color:rgba(0,0,0,0.6);
        border-radius:15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        position:absolute;
        z-index:1000;
        padding:2px 3px 0 0;
        }
        .label .checkbox .circle{
        display:none;
        background-color:#af213c;
        line-height:25px;
        text-align:center;
        z-index:0;
        border-radius:600px;
        -moz-border-radius:600px;
        -webkit-border-radius:600px;
        height:23px;
        width:23px;
        }
        .label{
        padding-right:34px;
        line-height: 30px;
        font-family: "b yekan";
        }
        .label:hover{
        text-decoration:underline;
        }
        .labelcheck{
        color:#af213c;
        }
        .labelcheck .checkbox .circle{
        display:block;
        }
        .labelcheck .checkbox{
        z-index:0;
        }


    </style>
    </head>
    <body>
                <label id="new" for="remember">remember me:</label>
                <input type="checkbox" name="data[remember]" id="remember"     value="1">           

                <script>
                $('input[type="checkbox"][id="remember"]').prev('label').append("<div class='checkbox'><div class='circle'></div></div>");
                $('input[type="checkbox"][id="remember"]').prev('label').addClass('label');
                var $chbx = $('input[type="checkbox"][id="remember"]')
                $chbx.onchange=function() {
                var label = $('label[for="'+$(this).attr('id')+'"]');
                     if(this.checked=true) {
                        label.addClass('labelcheck');
                     }
                     else if (this.checked=false){
                        label.addClass('label');
                     }
                 };


           </script>
    </body>
    </html>

复制并查看。我想更改标签的类，以便我可以设置复选框的每个状态的样式。所以我使用onchange将标签类与复选框状态联系起来。标签的类别没有变化。但它可能有其他问题，但我无法实现。

Answer 1

使复选框功能如下，

             $chbx.click(function() {
              var label = $('label[for="'+$(this).attr('id')+'"]');
                 if(this.checked) {

                    label.removeClass('label');
                    label.addClass('labelcheck');
                 }
                 else{
                    label.removeClass('labelcheck');
                    label.addClass('label');
                 }
             });

Answer 2

jQuery中有一些问题：

缺少关闭分号第3行
将$(this)用于jQuery obj，而不是this
平等测试不正确（==不仅仅是=）
if(this.checked=true)应为if ($(this).prop('checked')==true)

我最近在错过的所有错误。

请参阅working jsFiddle here

$('input[type="checkbox"][id="remember"]').prev('label').append("<div class='checkbox'><div class='circle'></div></div>");
$('input[type="checkbox"][id="remember"]').prev('label').addClass('label');
var $chbx = $('input[type="checkbox"][id="remember"]'); //missing closing semicolon
//alert($chbx.attr('id'));

$chbx.change(function() { //fixed formatting/syntax
    var label = $('label[for="' +$(this).attr('id')+ '"]');
    alert('CB property: ' + $(this).prop('checked'));
    if ($(this).prop('checked')==true) {
        label.addClass('labelcheck').removeClass('label');
        alert('Label class changed to: [' + label.attr('class') + ']');
    } else if ($(this).prop('checked')==false){
        label.removeClass('labelcheck').addClass('label');
        alert('Label class changed to: [' + label.attr('class') + ']');
}
});

制作自定义复选框

2 个答案: