Jquery CSS更改收音机的活动选择

Jquery CSS更改收音机的活动选择,jquery,css,Jquery,Css,我使用下面的方法来创建一个切换开关,而不是单选按钮-它工作得很好 .switch { display: block; float: left; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font-weight: bold; text-transform: uppercase; background: #eee; borde

我使用下面的方法来创建一个切换开关,而不是单选按钮-它工作得很好

.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>
但这使得这种风格毫无用处

因为我已经这样做了代码,这可以做到吗

我已经创造了一个小提琴如果更容易摆弄。。。obv必须将valuse checked=checked作为我通常从mysql表加载的内容,但它不能


此CSS应与您的代码配合使用:

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



顺便说一句,很酷的定制;-)

此CSS应与您的代码配合使用:

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


顺便说一句,很酷的定制;-)

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