javascript - 里面有文字的复选框

Question

我正在尝试创建带有框内文本的复选框。 Jquery UI 似乎已经有与我想要的类似的东西 - 看看此页面上的“切换”按钮:http://jqueryui.com/button/#checkbox

那里显示的示例代码似乎对我不起作用。以下是我页面上的代码片段。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>

<input type="checkbox" id="check"><label for="check">Toggle</label>

<script>
    $(document).ready(function () {
        $("#check").button();
    });
</script>

经检查，Chrome 告诉我 .button() 是一个未定义的函数。反过来，页面上的复选框保持不变，并保持为常规复选框，文本“toggle”位于外部。

有人知道另一个用于复选框功能和框中文本的插件吗？我还想将复选框设置得非常大，并且可能会在选中状态下更改背景颜色。感谢您的宝贵时间!

Answer 1

这是因为您使用的是旧版本的 jQuery 和 jQuery-ui。

在这个 fiddle 中:http://fiddle.jshell.net/t2jhL9ru/使用 jQuery 1.7.1，您可以看到 button() 未定义，而在此 fiddle 中: http://fiddle.jshell.net/t2jhL9ru/1/它使用 jQuery-1.8.3 和 jQuery-Ui-1.9.2，一切正常。