如何在表单之外制作单选按钮？

Posted 2023-03-05

【中文标题】如何在表单之外制作单选按钮？

【英文标题】：How do I make radio buttons outside of forms?

【发布时间】：2012-08-08 23:48:18

【问题描述】：

我正在尝试编写一个动态表单，所以我不能使用正常的表单标签和东西。我使用普通按钮、JQuery 和 AJAX 调用来模拟传统表单。但是，我不知道如何做单选按钮。有什么帮助吗？

编辑： 是的，我想我应该更具体一些。我试过做

<input type="radio" />

等等，但是：

它允许我一次选择多个按钮（这与单选按钮的意义相悖） 它不会让我在按下按钮后取消选择！

编辑 2： 我不使用表单标签的原因是我也需要多个提交按钮，而我发现解决这个难题的唯一方法是不使用表单标签。

【问题讨论】：

“我也需要多个提交按钮，而我发现解决这个难题的唯一方法是不使用表单标签。” - 给他们相同的名字。给他们不同的价值观。您可以在提交表单时检测哪个成功（只有点击的那个会成功）。如果您想做 Ajax，则将单击处理程序绑定到提交按钮，而不是将提交处理程序绑定到表单。

我猜使用多个提交按钮不是问题

【参考方案1】：

为什么不能使用表单标签？没有什么能阻止你这样做。但是如果你不想使用表单标签，为什么不呢：

<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>

对我来说很好用。 Demo

编辑：

1：您需要为无线电组指定名称，否则每个输入都被视为自己的组。因此，为什么在使用<input type="radio" /> 时一次可以选择多个按钮。看看我上面的代码。广播组是“测试”。

2：单选按钮应该有一个默认值。当您创建一个单选组时，您应该使用选中的属性指定一个默认值。这样做的结果是您无法取消选择单选按钮。您可以选择不同的值或坚持使用默认值。如果您希望能够取消选择，请考虑使用复选框。我更新了示例代码以反映这一点。

【讨论】：

不指定方法会给你默认的方法——get。

那是无效的 html。 <input> 元素不能有任何子元素。

嗯，我没有意识到这一点。但是如果他使用 Ajax 来提交表单，那有什么问题呢？是的，无效的 HTML。半睡半醒，修好了。 =/

答案有点奇怪。

确实，我明白你的意思。编辑了它。

【参考方案2】：

你可以试试这个：

HTML

<div>
     <ul>
        <li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
        <li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
        <li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
     </ul>
</div>

DEMO

【讨论】：

@user1544712​​ 你能检查一下，如果不工作请通知我

【参考方案3】：

不应该有没有表单元素的输入元素。如果您没有正确使用它，您将无法让 HTML 以您希望的方式响应。多个提交按钮表示需要多个表单。

如果由于某种原因不起作用，也许您应该重新考虑您要求用户提交信息的格式。

【讨论】：

好吧，更多背景知识：用户想要构建一个选择题。至少有一个答案选择，但答案选择的数量是任意的。我需要两个普通按钮：“添加答案选项”和“提交问题”。我需要单选按钮，以便用户可以确定哪个答案选择是正确的。

如果我错了，请纠正我，但在我看来，您正在尝试使用表单动态生成另一个表单。如果是这种情况，我认为您缺少一些步骤。您需要将信息与第一个表格一起提交，这需要某种形式的提交。然后，您将需要创建一组额外的函数来生成最终表单。从那里您可以更新页面或将其提交到某个地方。

【参考方案4】：

如果您能够选择多个单选按钮，则听起来您的名称属性不匹配。你想要的结果是这样的：

<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">

<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">

请注意，选项组的名称属性相同，这意味着选项将相互替换。

另外，当纯粹使用 javascript 使用它们时，我没有在表单标签中包装收音机没有任何问题，但是如果你想做任何 html 帖子的东西，我希望它们是必需的。