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

【问题标题】：style for checkboxes with formidable plugin带有强大插件的复选框样式
【发布时间】：2014-01-14 10:46:56
【问题描述】：

我正在尝试使用 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();
    });
});

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

【问题讨论】：

太好了，你已经完成了这项工作。有什么问题？
它不起作用，请检查链接 fb-navigatio.com/markersparebank2/

标签： jquery css checkbox

【解决方案1】：

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

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

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

【讨论】：