Question

我正在尝试使用JQuery UI的.button（）方法为单选按钮设置外观。

以下是按钮的代码：

    <input value name="U1" id="U1:1" type="radio" class="languageWidget">

这是相应的Javascript：

    $(document).ready(function() {
        $("input.languageWidget").button();
    });

我没有收到任何类型的控制台错误，页面仍然可以正常加载。它根本不重新按钮。有线索吗？

Answer 1

对于单选按钮，它有点复杂（但不是太多）。

首先，您需要一个包含按钮集的DIV，您可以使用buttonset（）方法一次性初始化该按钮。

接下来，您需要拥有<label for="this_button_id">，因为它是可见且可点击的标签。因此，使用单选按钮，标签将成为按钮，而不是输入控件。

因此，您必须确保<input>元素的ID和<label>元素的for=匹配。

jsFiddle

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#testdiv').buttonset();

            }); //END $(document).ready() 

        </script>
    </head>
<body>

<!--<input name="U1" id="U1-1" type="radio" class="languageWidget" />-->
<div id="testdiv">
    <input type="radio" id="U1-1" name="U1-1" /><label for="U1-1">Choice 1</label>
    <input type="radio" id="U1-2" name="U1-2" checked="checked" /><label for="U1-2">Choice 2</label>
    <input type="radio" id="U1-3" name="U1-3" /><label for="U1-3">Choice 3</label>
</div>

</body>
</html>

JQuery .button（）方法什么都不做

1 个答案: