四个问题中只选择了一个单选按钮

Posted 2023-03-05

技术标签:

【中文标题】四个问题中只选择了一个单选按钮【英文标题】：Only one radio buttons being selected out of four questions 【发布时间】：2019-08-03 17:37:36 【问题描述】：

我想为每个问题列出四个问题和四个选项。我已经使用foreach 循环成功获取了问题，但是单选按钮似乎不适用于foreach 循环。

例如：我从第一个问题中选择了一个答案并跳转到第二个问题，但是如果我为第二个问题选择一个答案，则第一个问题的选定选项将被取消选择。我尝试更改选项的值，但没有成功，我尝试在 foreach 循环中使用 for 循环，但即使这样也没有用。

以下是我的代码：

<form method="post" action="process/quiz.php">
<?php 

$quizList = $quiz->getQuiz(4);

if($quizList)

    foreach($quizList as $list)
        ?>
        <div class="row rowpadding">
    <div class="col-md-8 col-md-offset-2" id="panel1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <?php echo $list->title; ?>
                </h5>
            </div>
            <div class="panel-body two-col">
                <div class="row">
                    <div class="col-md-6">
                        <div class="frb frb-danger margin-bottom-none">
                            <input type="radio" id="radio-button-1" name="ans1" value="<?php echo $list->option_A ?>">
                            <label for="radio-button-1">
                                <span class="frb-title"><?php echo $list->option_A ?> </span>
                                <span class="frb-description"></span>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="frb frb-danger margin-bottom-none">
                            <input type="radio" id="radio-button-2" name="ans2" value="<?php echo $list->option_B ?>">
                            <label for="radio-button-2">
                                <span class="frb-title"><?php echo $list->option_B ?></span>
                                <span class="frb-description"></span>
                            </label>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="frb frb-danger margin-bottom-none">
                            <input type="radio" id="radio-button-3" name="ans3" value="<?php echo $list->option_C ?>">
                            <label for="radio-button-3">
                                <span class="frb-title"><?php echo $list->option_C ?></span>
                                <span class="frb-description"></span>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="frb frb-danger margin-bottom-none">
                            <input type="radio" id="radio-button-4" name="ans4" value="<?php echo $list->option_D ?>">
                            <label for="radio-button-4">
                                <span class="frb-title"><?php echo $list->option_D ?></span>
                                <span class="frb-description"></span>
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
        <?php
    



?>


<div class="panel-footer rowpadding">
    <div class="row">
        <div class="col-md-6">
            <button type="submit" class="btn btn-sm btn-block ">
                <span class="fa fa-send"></span>
                submit </button>
        </div>

    </div>
</div>
</form>

我有什么遗漏的吗？

【问题讨论】：

您将通过此脚本生成多个具有相同 ID 的输入，这是无效的 html。 @Qirel 我已经从表单中删除了 id，但它的作用与有 id 时一样。是的，ID 无关紧要，重要的是您对相同的问题一直使用相同的名称。请参阅下面的答案以获取解决方案。这只是一个评论 - 不是答案，@dearsina。 ;-) @Qirel，您的评论很到位，ID 确实很重要。 【参考方案1】：

您的问题是您正在重复使用输入的名称和 ID。名称和 ID 必须是唯一的，HTML 才能有效，并按您的预期工作。您可以将输入名称改为 HTML 数组，然后按此分组。

使用数组的$key，您可以为每个答案组定义一个唯一的名称。我们还使用它来定义元素的 ID，因为它们必须是唯一的。

所做的更改是，

在循环中包含$key 将-<?php echo $key; ?> 添加到您使用按钮 ID（以及标签中的引用）的所有实例中，以确保所有 ID 都是唯一的使用name="answer[<?php echo $key; ?>]" 代替ans1、ans2、ans3、ans4。这样可以确保每个答案只能选择一个单选按钮，并且您有一组答案，每个元素都是一个问题的答案。

foreach ($quizList as $key=>$list)
    ?>
    <div class="row rowpadding">
        <div class="col-md-8 col-md-offset-2" id="panel1-<?php echo $key; ?>">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <?php echo $list->title; ?>
                    </h5>
                </div>
                <div class="panel-body two-col">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="frb frb-danger margin-bottom-none">
                                <input type="radio" id="radio-button-1-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_A ?>">
                                <label for="radio-button-<?php echo $key; ?>">
                                    <span class="frb-title"><?php echo $list->option_A ?> </span>
                                    <span class="frb-description"></span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="frb frb-danger margin-bottom-none">
                                <input type="radio" id="radio-button-2-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_B ?>">
                                <label for="radio-button-2-<?php echo $key; ?>">
                                    <span class="frb-title"><?php echo $list->option_B ?></span>
                                    <span class="frb-description"></span>
                                </label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="frb frb-danger margin-bottom-none">
                                <input type="radio" id="radio-button-3-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_C ?>">
                                <label for="radio-button-3-<?php echo $key; ?>">
                                    <span class="frb-title"><?php echo $list->option_C ?></span>
                                    <span class="frb-description"></span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="frb frb-danger margin-bottom-none">
                                <input type="radio" id="radio-button-4-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_D ?>">
                                <label for="radio-button-4-<?php echo $key; ?>">
                                    <span class="frb-title"><?php echo $list->option_D ?></span>
                                    <span class="frb-description"></span>
                                </label>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
   <?php

现在，当您提交表单时，所选答案将位于名称为 answer 的数组中。所以你将不得不做类似的事情

foreach ($_POST['answer'] as $key=>$value) 
     // $key is the same key from the loop above
     // $value is the value of the selected radio button

【讨论】：

如何知道数组中答案的问题？每个数组中的$key是一样的。所以$_POST['answers'][0] 将是问题的答案，其中$key 在带问题的循环中（foreach ($quizList as $key=>$list) ）为0。如果您将该键定义为问题的ID，那么您将获得问题的ID答案循环和问题循环。【参考方案2】：

单选按钮按名称绑定在一起。在您的foreach() 中，您不断为每组问题的答案重复相同的名称。（您还重复了相同的 ID，这是错误的形式，但不会破坏您的脚本）。

您需要重新构建单选按钮，使每组按钮（属于同一组）具有相同的名称。每个组的名称必须是唯一的。

一个简化的例子：

<form>
  <p>These belong together, and all have the name "gender":</p>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>

  <p>These belong together, and all have the name "team":</p>
  <input type="radio" name="team" value="blue"> Blue<br>
  <input type="radio" name="team" value="red"> Red<br>
</form>

【讨论】：

有没有办法用 foreach 循环做到这一点？因为循环，单选按钮工作得很好。是的，当然，我相信这个问题已经有了答案，所以看看那里。【参考方案3】：

一个更简单的答案

foreach($quizList as $key => $list) ?>
 <form>
    <input type="radio" id="radio-button-1" name="answer[<?php echo $key;?>]" value="<?php echo $list->option_A ?>"> <!-- answer_0 -->
    <input type="radio" id="radio-button-1" name="answer[<?php echo $key;?>]" value="<?php echo $list->option_B ?>"> <!-- answer_0 -->
</form>

然后在 php 中你应该得到这样的东西：

 $_POST['answer'] = [
       '0' => 'foo'
       //'1' => 'biz' ....
  ];

使用 Ajax

一个带有数字键的音符。如果您使用 AJAX（如果不是，则基本上可以忽略这一点），在与 JSON 相互转换时，您可能会丢失数字索引，例如，假设我们期望这样：

  $_POST['answer'] = [
       '0' => 'foo'
       '2' => 'biz' ....
  ];

当它在 Json 中编码时，它可能是这样的（密钥去哪儿了）

  '"answer":["foo", "biz"]`

然后当 PHP 将其转换回来时，我们丢失了我们的密钥。我们会有这样的东西：

  $_POST['answer'] = [
       0 => 'foo'
       1 => 'biz' ....
  ];

任何不保留键的数组函数也是如此，sort 等。这里的简单解决方案是在键前加上 a 或 _ 之类的前缀。然后它们将是字符串并转换为 JSON 中的对象。在 PHP 中，你仍然可以像这样匹配这些：

  if("a$id" == $post_id)

  if(substr($post_id,1) == $id)

  //remove all prefixes
  print_r(array_combine(preg_replace('/^a/', '', array_keys($answers)),$answers));

  //it feels wrong but if you have to append you can do this
   var_dump((int)'2a' == 2); //true so your key would be 2a because how PHP converts strings to ints.

等等。

希望对你有帮助！

【讨论】：

以上是关于四个问题中只选择了一个单选按钮的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Flutter 中只选择一组单选按钮的值？

我如何在我的 html 中只选择 1 个单选按钮

如何编写代码，以便在带有django的模型中只选择一个单选按钮。

一行中的一组单选按钮，同时选择一行中的一个单选按钮，它会影响另一行目标-c

使用图像而不是单选按钮

当用户从颤动的单选按钮组中选择单选按钮时如何保存数据？