选择多个单选按钮（通过 jquery、javascript？）

Posted 2023-03-05

【中文标题】选择多个单选按钮（通过 jquery、javascript？）

【英文标题】：Selecting multiple radio buttons (through jquery, javasscript?)

【发布时间】：2011-10-29 15:33:37

【问题描述】：

我目前有一个表单，其中包含 5 个单选按钮条目（见下文）。 我正在寻找的档案如下： - 能够选择多个单选按钮 - 让我们说 3 并提交表单。

目前我可以使用 php、SQL 正常工作，但我只能选择一个单选按钮并提交。

我认为取消选择单选按钮也会派上用场，以防您错误地单击一个按钮。

我的猜测是这可以通过一些 javascript 来完成？有什么建议？也许是在线示例？

<form id="pollform" action="poll.php" method="post">
<input id="option-1" type="radio" value="1" name="poll">
<label for="option-1">Select option 1</label>

<input id="option-2" type="radio" value="2" name="poll">
<label for="option-2">Select option 2</label>

<input id="option-3" type="radio" value="3" name="poll">
<label for="option-3">Select option 3</label>

<input id="option-4" type="radio" value="4" name="poll">
<label for="option-4">Select option 4</label>

<input id="option-5" type="radio" value="5" name="poll">
<label for="option-5">Select option 5</label>
</form>

【问题讨论】：

为什么不使用复选框组呢？这就是为什么有复选框和单选按钮，用于不同的情况。

好的，我想我可以看到我需要使用复选框 :) 但是，我想我仍然需要使用一些 javascript 来实际计算用户已选中 3 个框并尝试选择复选框 nr 4不可能吗？

认为我自己想通了 - 在下面发布答案:) 感谢您的帮助！

【参考方案1】：

由于它具有相同的名称 poll，因此您将无法这样做，因为输入类型 radio 专门用于从多个输入中选择单个值。

您可以为此使用输入类型 checkbox 并将它们作为数组：

<form id="pollform" action="poll.php" method="post">
    <input id="option-1" type="checkbox" value="1" name="poll[]">
    <label for="option-1">Select option 1</label>

    <input id="option-2" type="checkbox" value="2" name="poll[]">
    <label for="option-2">Select option 2</label>

    <input id="option-3" type="checkbox" value="3" name="poll[]">
    <label for="option-3">Select option 3</label>

    <input id="option-4" type="checkbox" value="4" name="poll[]">
    <label for="option-4">Select option 4</label>

    <input id="option-5" type="checkbox" value="5" name="poll[]">
    <label for="option-5">Select option 5</label>
</form>

限制（使用 jQuery）数量：

$("input[type=checkbox][name=poll[]]").click(function() 
    var numberSel = $("input[type=checkbox][name=poll[]]:checked").length >= 3;     
    $("input[type=checkbox][name=poll[]]").not(":checked").attr("disabled",numberSel);
);

【讨论】：

好吧，我认为这很简单——但只是为了在我希望用单选按钮做什么的场景中设置它——即用户需要选择 3 个复选框并且不应该选择更多除此之外 - 对这种方法有什么建议吗？

感谢 Mihai - 在您的指导下，我设法让它工作了。

我想到的还有一件事 - 我可以使用相同的基本方法禁用提交按钮，然后在选中 3 个复选框时启用它吗？

【参考方案2】：

单选按钮仅设计用于选择一项，请改用复选框。

【讨论】：

这不是 OP 的答案，而是一个澄清。如果您没有回答他的问题，请在 OP 的问题下发表评论以进行澄清。

【参考方案3】：

单选按钮的设计使得每个组中只能选择一个选项（由其共享名称指定）一次可以选择（就像您只能将收音机调到一个电台一样）。

允许选择任意数量的选项的输入控件是复选框。如果您将[] 附加到它们的名称后，则所选选项将作为数组到达 PHP 端。

<input type="checkbox" value="1" name="poll[]" />
<input type="checkbox" value="2" name="poll[]" />