jQuery Mobile:如何更改单选按钮活动状态颜色

时间:2013-04-11 06:44:26

标签: jquery css jquery-mobile jquery-mobile-fieldset jquery-mobile-radio

如何在选择时更改单选按钮背景颜色?

    $("input[type='radio']").click(function(e) {
    $("input[type='radio']").css('background-color', '#ff0000');
});

我试过这个..但它不起作用。


它没有用。我忘了分享我的代码

  

<fieldset data-role="controlgroup" id="custom-fieldset"> <span>Were you able to complete your visit today?</span><br/><input type="radio" id="radio_1134198__4516395" name="sdid_1134198" value="radio_1134198__4516395" /><label for="radio_1134198__4516395">Yes</label>

我得到的结果是http://i.stack.imgur.com/SDGeZ.png。单选按钮颜色必须更改。

1 个答案:

答案 0 :(得分:5)

工作示例:http://jsfiddle.net/Gajotres/qkCZY/

版本1

HTML:

<form>
    <fieldset data-role="controlgroup" data-type="horizontal" id="custom-fieldset">
        <legend>Horizontal:</legend>
        <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio"/>
        <label for="radio-choice-h-2a">One</label>
        <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio"/>
        <label for="radio-choice-h-2b">Two</label>
        <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio"/>
        <label for="radio-choice-h-2c">Three</label>
    </fieldset>
</form>

<强> CSS:

#custom-fieldset div .ui-radio .ui-radio-on {
    background: red !important;
}

版本2

工作示例:http://jsfiddle.net/Gajotres/hTY6k/

HTML:

<fieldset data-role="controlgroup" id="custom-fieldset"> 
    <legend>Were you able to complete your visit today?</legend>
    <label for="radio_1134198__4516395">Yes</label>
    <input type="radio" id="radio_1134198__4516395" name="sdid_1134198" value="radio_1134198__4516395"/>
</fieldset>

CSS:

#custom-fieldset div .ui-radio label span .ui-icon-radio-on {
    background-color: red !important;
}

最后的笔记

如果您想了解有关如何自定义jQuery Mobile页面和小部件的更多信息,请查看 article 。它附带了许多工作示例,包括为什么是jQuery Mobile必不可少的。