【问题标题】:Selecting multiple radio buttons (through jquery, javasscript?)选择多个单选按钮(通过 jquery、javascript?)
【发布时间】: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不可能吗?
  • 认为我自己想通了 - 在下面发布答案:) 感谢您的帮助!

标签: php javascript jquery radio-button


【解决方案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[]" />

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-19
    • 2011-03-12
    • 1970-01-01
    • 1970-01-01
    • 2015-02-27
    相关资源
    最近更新 更多