jquery-ui - jQueryUI 单选按钮可见

Question

jQuery mobile 使单选按钮可见。jQueryUI 是否可以不费力气地做到这一点？用户了解单选按钮的功能，所以我更愿意保留这种视觉识别。

Answer 1

jQuery

$("#radioSet").buttonset();
$("#radio1").button("option", "icons", { primary: 'ui-icon-check' });
$("#radio2").button("option", "icons", { primary: 'ui-icon-check' });

$("#radioSet input[type=radio]").on("click", function () {
    $("#radioSet input[type=radio]").each(function () {
        if ($(this).is(":checked")) {
            $(this).button("option", "icons", { primary: 'ui-icon-check' });
        } else {
            $(this).button("option", "icons", { primary: 'ui-icon-cancel' });
        }
    });
});

html

<div id="radioSet">
    <input type="radio" id="radio1" name="radio" checked="checked" />
    <label for="radio1">Radio 1</label>

    <input type="radio" id="radio2" name="radio" />
    <label for="radio2">Radio 2</label>
</div>