jquery - 具有强大插件的复选框样式

Question

我正在尝试使用 CSS/JS 为复选框制作自定义样式

目前位于 http://www.fb-navigatio.com/markersparebank2/ .

我为复选框创建了样式:

.frm_checkbox label input{
    display:none;   
}
.frm_checkbox label {
    background: url("images/check_sprite.png") no-repeat scroll 0 0;
    padding: 4px 0 8px 42px;
    position:relative;
    z-index:100;
    cursor:pointer;
}
.frm_checkbox label:hover {
    background: url("images/check_sprite.png") no-repeat scroll 0 -40px;
}
.frm_checkbox label.checked{
    background: url("images/check_sprite.png") no-repeat scroll 0 -80px;    
}

这是JS代码:

jQuery(document).ready(function($){
    var tmp = [];
    $('input:checkbox').each(function(index){
        tmp[index] = '';
    })
    $('.frm_checkbox label').click(function(index){

        if(tmp[index] == ''){
            $(this).addClass('checked');
            $(this).find('input:checkbox').addAttr('checked');
            console.log(tmp[index]);
        }else if(tmp[index] =='1') {
            tmp[index] = '0';
            $(this).removeClass('checked');
            $(this).find('input').removeAttr('checked');
            console.log(tmp[index]);
        }
        //var $checkbox = $(this).find(':checkbox');
        //$checkbox.attr('checked', !$checkbox.is(':checked'));
        //alert();
    });
});

问题是复选框不起作用。单击复选框似乎并没有选中它。

Answer 1

以下是我发现的一些潜在问题:

1. jQuery 没有函数 addAttr 和 removeAttr。您应该使用 prop('checked', true) 和 prop('checked', false)，如本问题所述: Setting "checked" for a checkbox with jQuery? 可以找到 jQuery 文档 on its website .

2. 您正在使用复选框中的索引为 tmp 设置初始值，但随后尝试将这些索引用于标签。这有点冒险。我建议将数据属性附加到元素本身:$checkbox.data('checkedState', false)

3. 您的 if-else 语句检查 tmp 值是否等于 '' 或 '1'。但是，您也有 '0'，这是您在取消选中时设置的。由于您从不检查 '0'，这意味着您将永远无法在取消选中复选框后选中它。您可以只有两个值，而不是 ''

的第三个默认值

如果这些建议能解决您的问题，请告诉我。如果没有，请设置一个jsFiddle以便其他人可以自己尝试、调试和修改代码。