Стилизация кнопок группы управления в Jquery Mobile

Question

У меня есть контрольная группа с группировкой 3 переключателей, чтобы они выглядели как кнопки, и я хочу покрасить кнопку при нажатии каждой кнопки.Нажатие на «Красный» изменит цвет кнопки на «Красный»

Код ниже

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
    <input type="radio" name="rd1" id="rd1" value="R" />
    <label for="rd1">Red</label>
    <input type="radio" name="rd2" id="rd2" value="G" />
    <label for="rd2">Green</label>
    <input type="radio" name="rd3" id="rd3" value="B" />
    <label for="rd3">Blue</label>
</fieldset>

Может кто-нибудь, пожалуйста, помогите мне в этом.

Answer 1

Live Пример:

• http://jsfiddle.net/phillpafford/fAYEw/5/

JS

$('input[name=rdColor]').change(function() {
    $(this).next().addClass($(this).val());
});

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <input type="radio" name="rdColor" id="rd1" value="R" />
                <label for="rd1">Red</label>
                <input type="radio" name="rdColor" id="rd2" value="G" />
                <label for="rd2">Green</label>
                <input type="radio" name="rdColor" id="rd3" value="B" />
                <label for="rd3">Blue</label>
            </fieldset>
        </div>
    </div>
</div>

CSS

.R {
    background:red;  
}

.B {
    background:blue;
}

.G {
    background:green;
}