1

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

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 中不是很好，不知道该怎么做。有人知道吗？

4

1 回答 1

1

在这里你有一个简单的例子

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');
        });​

希望这可以帮助！

于 2012-08-23T17:39:57.157 回答