Question

我在工作中使用大型Backbone应用程序。界面本质上是一个很大的形式。我们使用name属性将输入映射到我们的模型属性，这样我们就可以在更改或输入时自动保存每个字段，让Backbone做它的事情。我花了两天时间试图弄清楚为什么一个特定部分会导致页面重新加载一个奇怪的URL。现在答案很明显，但是在建立一个超过9个月的大型应用程序之后，你往往会忽视这些小事情。

在整个应用程序中，我们在整个地方使用<input>而没有包装<form>。但是，在一种情况下，我们有一个Handlebars模板形式的重复元素，其中包含具有相同名称的单选按钮：

<div id="1">
    <input type="radio" name="choose" value="yes"> Yes
    <input type="radio" name="choose" value="no"> No
    <input type="text">
</div>

<div id="2">
    <input type="radio" name="choose" value="yes"> Yes
    <input type="radio" name="choose" value="no"> No
    <input type="text">
</div>

<div id="3">
    <input type="radio" name="choose" value="yes"> Yes
    <input type="radio" name="choose" value="no"> No
    <input type="text">
</div>

这个问题是它们被组合在一起，因为它们都具有相同的name属性。因此，我们获得了1个值（对于一个大组），而不是获得3个值（每个组一个）。

由于我们知道单选按钮组是“范围”到包含<form>的，因此我们只是将其包装起来：

<div id="1">
    <form>
        <input type="radio" name="choose" value="yes"> Yes
        <input type="radio" name="choose" value="no"> No
        <input type="text">
    </form>
</div>

<div id="2">
    <form>
        <input type="radio" name="choose" value="yes"> Yes
        <input type="radio" name="choose" value="no"> No
        <input type="text">
    </form>
</div>

<div id="3">
    <form>
        <input type="radio" name="choose" value="yes"> Yes
        <input type="radio" name="choose" value="no"> No
        <input type="text">
    </form>
</div>

这适用于单选按钮，但现在我们有一个表单，在文本enter上点击<input>实际上提交表单，而不是自动保存（技术上，除了自动保存）。当时，我从未想过这样，因为我们在应用程序中的其他地方设法避免了这种情况。

我可以想到这个问题的一些不同解决方案：在表单上设置提交处理程序，在文本输入上设置提交处理程序，将文本输入留在表单之外。但这些看起来像黑客，以处理我会说的破坏行为。如果输入元素在表单之外工作，则对输入元素进行分组应该在表单之外工作。由于我们已经使用了name属性（适用于其他所有内容），因此不能选择唯一的名称。

对于这样的情况，还有最佳做法吗？是否有一个除<form>以外的元素可以正确地确定单选按钮的范围？我是否只能与<form onsubmit="return false;">生活在一起？

P.S。我们支持IE 8 +

更新

这就是我最终的结果：

<div id="1">
    <form onsubmit="return false;">
        <input type="radio" name="choose" value="yes"> Yes
        <input type="radio" name="choose" value="no"> No
    </form>

    <input type="text">
</div>

Answer 1

最好的办法是将每个组的名称更改为唯一。
第二好的方法是按照您的方式对表单进行分组，然后添加返回false。
第三个最好的方法是使用jquery'preventdefault'阻止表单提交（这可以适用于给定特定ID的所有表单）。
最后（也是最荒谬的选项）是将每组按钮发送到它自己的小html文件，并使用iframe将它们显示在同一页面上。

HTML Radio按钮最佳实践

1 个答案: