Question

我找到了很好的代码，可以对复选框进行样式化。

HTML：

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>

CSS：

.checkbox {
    display: none;
}
.checkbox_lab {
    background: url("images/off.png") no-repeat;
    height: 28px;
    width: 81px;
    display: block;
}
.checkbox_lab_sel {
    background: url("images/on.png") no-repeat;
}

Javascript（使用jquery）：

    $(document).ready(function(){
        $(".checkbox").change(function(){
            if($(this).is(":checked")){
                $(this).next("label").addClass("checkbox_lab_sel");
            }else{
                $(this).next("label").removeClass("checkbox_lab_sel");
            }
        });
    });

工作非常好。我希望“从开到关的好动画切换，反之亦然”，这是保存在GIF动画中的，但是......我不是很擅长JS，也不知道怎么做。有人有想法吗？

Answer 1

这里有一个快速的example

HTML

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>

CSS

.checkbox {
    /*display: none;*/
}
.checkbox_lab {
    background: url("images/off.png") no-repeat;
    height: 28px;
    width: 81px;
    display: block;
}
.checkbox_lab_sel {
    background-image: url('http://cdn.rpxnow.com/rel/img/9a8269421303631316be4ab5e34870e1.gif');
}

的Javascript

$(".checkbox").change(function(){
    $('#checkbox_lab').toggleClass('checkbox_lab_sel');
        });

希望这有帮助！

将Gif动画添加到复选框

1 个答案: