0

私はラジオボタンの代わりにトグルスイッチを作成するために以下を使用しています - それはうまくいきます

.switch
{
    display: block;
    float: left;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    background: #eee;
    border: 1px solid #aaa;
    padding: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    margin-left: 20px;
}

.switch input[type=radio]
{
    display: none;
}

.switch label
{
    display: block;
    float: left;
    padding: 3px 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
}

.switch label:hover
{
    text-shadow: 0 0 2px #fff;
    color: #888;
}

.switch label.checked 
{
    background: #8fc800;
    color: #eee;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(top, #8fc800, #438c00);
    background: -moz-linear-gradient(top, #8fc800, #438c00);
    background: -ms-linear-gradient(top, #8fc800, #438c00);
    cursor: default;
}

そしてhtml：

<div class="switch">
    <input type="radio" name="weekly_new" id="weekSW-0" <?=$yes_checked?> value="Yes" />
    <label for="weekSW-0" id="yes">ON</label>
    <input type="radio" name="weekly_new" id="weekSW-1" <?=$no_checked?> value="No" />
    <label for="weekSW-1" id="no">OFF</label>
</div>

そしてjquery：

<script>
     $(".switch label:not(.checked)").click(function(){
        var label = $(this);
        var input = $('#' + label.attr('for'));

        if (!input.prop('checked')){
            label.closest('.switch').find("label").removeClass('checked');                        
            label.addClass('checked');
            input.prop('checked', true);
        }
    });

    $(".switch input[checked=checked]").each(function(){
        $("label[for=" + $(this).attr('id') + "]").addClass('checked');
    });
    </script>

ご覧のとおり、label.checked はボタンに「外観」を与えます。私がやりたいのは、はいではなく、いいえが選択されている場合に別の色を使用することです。いいえの場合は赤、はいの場合は緑、画期的ですね。

とにかく、それができるかどうかは一生わからない

ラベルにIDを割り当てて、例えば試してみました

.switch label.checked #yes { blah blah }

しかし、これはスタイルを役に立たなくしました!

この方法でコードを作成したので、これを実行できますか?

いじりやすい場合は、フィドルを作成しました... obvは、通常mysqlテーブルからロードするため、値をchecked = checkedにする必要がありましたが、できません

http://jsfiddle.net/aS69U/

4

1 に答える 1

3

この CSS はコードで動作するはずです。

.switch #no.checked {
    background:red;
}

デモ

ちなみにクールなカスタマイズ;-)

于 2012-10-30T09:26:12.110 に答える