-1

我正在尝试使用 JQuery UI 的 .button() 方法对单选按钮进行皮肤处理。

这是按钮的代码：

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

这是相应的Javascript：

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

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

4

1 回答 1

1

For radio buttons it's a little more complex (but not too much).

First, you need a DIV that contains the button set, which you initialize all-at-once with the buttonset() method.

Next, you need to have a <label for="this_button_id">, because it is the label that becomes visible and clickable. Therefore, with a radio button, the label becomes the button, not the input control.

So you must ensure that the <input> element's ID and the <label> element's for= match.

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>
于 2013-06-27T21:46:26.277 回答