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

以下是我看到的一些潜在问题：

jQuery没有addAttr和removeAttr功能。您应该使用prop('checked', true)和prop('checked', false)，如此问题所述： Setting "checked" for a checkbox with jQuery? 可以找到jQuery的文档on its website。
您正在使用复选框中的索引为tmp设置初始值，但之后会尝试将这些索引用于标签。这有点冒险。我建议将数据属性附加到元素本身：$checkbox.data('checkedState', false)
您的if-else语句会检查tmp值是否等于''或'1'。但是，您还可以在取消选中时设置'0'。由于您从不检查'0'，这意味着您在取消选中后将永远无法检查复选框。您可以只有两个值，而不是第三个默认值''

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

带有强大插件的复选框的样式

1 个答案: