jQuery UI复选框按钮显示正常复选框

Question

HTML：

<input id="1" type="checkbox" checked="checked" />
<label for="1">Online</label>

jQuery的：

$(function () {
    $('input[type=checkbox]').button();
});

在浏览器中呈现时，它会显示传统复选框和下方的按钮。我可以点击其中任何一个，他们将切换复选框。这是浏览器中的HTML：

<input id="1" type="checkbox" checked="checked" class="ui-helper-hidden-accessible">
<label for="1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Online</span></label>

当我输入相同的jsfiddle时，它完美地工作，只需切换按钮。所以我不知道造成这种情况的原因是什么？

Answer 1

您的jQuery选择器是错误的。您需要添加“类型，如下：

$('input[type="checkbox"]').button();