-2

我正在尝试使用 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 将标签类与复选框状态相关联。标签的类别没有改变。但它可能还有其他问题，但我无法意识到这一点。

4

2 回答 2

0

jQuery 中有一些错误：

  1. 缺少结束分号第 3 行
  2. 用于$(this)jQuery obj，而不是this
  3. 平等测试不正确（== 不只是=）
  4. if(this.checked=true)应该if ($(this).prop('checked')==true)

我最近犯的所有错误。

在这里查看工作 jsFiddle

$('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') + ']');
}
});
于 2013-08-28T17:18:23.960 回答
0

Make checkbox function like this,

             $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');
                 }
             });
于 2013-08-28T17:01:04.657 回答