jQuery：如何在单个页面上多次使用相同的小部件答案

【问题标题】：jQuery: How to use the same widget multiple times on a single pagejQuery：如何在单个页面上多次使用相同的小部件
【发布时间】：2012-11-27 05:48:44
【问题描述】：

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

示例 - 收音机选择小部件，它包含在使用 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？

【问题讨论】：

标签： jquery-ui radio-button widget

【解决方案1】：

它实际上不需要环绕表单。相反，您只需要确保您的广播组具有不同的名称。更详细的解释here。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

或者你可以使用

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

Wich 会选择 radioset 类而不是 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 需要它们成为 something1 something2。试试看。你可以在一个页面上有很多收音机，这很简单。
你是对的，但有一个重要的补充 - 两个单选机需要采用单独的形式，否则所有单选按钮都捆绑在一起。实际上我没有看到其中的逻辑，但我测试了它，这是差异化元素。 @lznogood - 做出改变，我会接受你的回答。
谢谢！！您必须将其包装在一个表格中似乎很荒谬。奇怪的问题。