Question

jQuery UI似乎对组成窗口小部件的元素的属性很敏感。那么如何在一个页面\ form中多次使用相同的小部件？

示例 - 无线电选择小部件，它位于使用jQuery-ui下载的演示index.html文件中：

<!DOCTYPE html> 
<html>
    <head> 
        ...
        $(function(){
            $("#radioset").buttonset();
        }
        ...
    </head>
    <body>
        ...
        <form style="margin-top: 1em;"> 
            <div id="radioset"> 
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
            </div> 
        </form> 
        ...
    </body>
</html>

然后我应该添加什么代码以使用不同的单选按钮设置第二个div？

Answer 1

实际上并不需要将表单包裹起来。相反，您只需要确保您的无线电组具有不同的名称。我们会更详细地解释here。

Answer 2

我相信这就是你想要的，以及如何将2个不同的收音机放入一个表格的例子。注意输入的名称

$(function(){
            $(".radioset").buttonset();
        }
<form name="form1" style="margin-top: 1em;"> 
    <div id="radioset1" class="radioset"> 
        <input type="radio" id="radioset1-1" name="radio1" /><label for="radioset1-1">Choice 1</label>
        <input type="radio" id="radioset1-2" name="radio1" checked="checked" /><label for="radioset1-2">Choice 2</label> 
        <input type="radio" id="radioset1-3" name="radio1" /><label for="radioset1-3">Choice 3</label>
    </div> 
    <div id="radioset2" class="radioset"> 
        <input type="radio" id="radioset2-1" name="radio2" /><label for="radioset2-1">Choice 1</label>
        <input type="radio" id="radioset2-2" name="radio2" checked="checked" /><label for="radioset2-2">Choice 2</label> 
        <input type="radio" id="radioset2-3" name="radio2" /><label for="radioset2-3">Choice 3</label>
    </div> 
</form>

Answer 3

   $(function(){
            $("#radioset2").buttonset();
        }
<div id="radioset2">

或者你可以使用

$(".radioset").buttonset();

选择无线电网类而非id，这样你就可以有很多。

解决你的意见：

$(function(){
                $("#radioset1").buttonset();
                $("#radioset2").buttonset();
            }

<form name="form1" style="margin-top: 1em;"> 
            <div id="radioset1"> 
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
            </div> 
</form>
<form name="form2" style="margin-top: 1em;"> 
            <div id="radioset2"> 
                    <input type="radio" id="radioAgain1" name="radio" /><label for="radio1">Choice 1</label>
                    <input type="radio" id="radioAgain2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                    <input type="radio" id="radioAgain3" name="radio" /><label for="radio3">Choice 3</label>
                </div> 
        </form>

我认为上述没有理由不起作用。

jQuery：如何在单个页面上多次使用同一个窗口小部件

3 个答案: