jQuery UI按钮 - 如何更改样式和图标选中按钮?

时间:2010-12-08 07:10:09

标签: jquery jquery-ui

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.date').datepicker($.datepicker.regional['cs']);
        $(".votePollState").button({ icons: {primary:'ui-icon-closethick'},text: false });
    });
</script>

HTML code:

<input type="checkbox" class="votePollState" id="point-1"/><label for="point-1">Choice 1</label>

<input type="checkbox" class="votePollState" id="point-1"/><label for="point-1">Choice 1</label>

我需要为复选框状态设置一些图标,没有选中复选框有其他图标,复选复选框有其他图标。不,如果我选中复选框,这有一些图标,但只更改边框颜色。

使用iPhone上的ON / OF开关按钮。

THX

1 个答案:

答案 0 :(得分:12)

您可以添加.change()处理程序,该处理程序采用复选框的.checked状态并根据它分配图标,如下所示:

$(".votePollState").button({ 
    icons: {primary:'ui-icon-closethick'},
    text: false 
}).change(function() {
    $(this).button("option", { 
        icons: { primary: this.checked ? 'ui-icon-check' : 'ui-icon-closethick' }
    });
});

You can test it out here