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 に答える