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

Question

我想为每个问题列出四个问题和四个选项。我已经成功地用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>

我遗漏了什么吗？

Answer 1

您的问题是，您正在重复使用输入的名称和ID。名称和it必须是唯一的，才能使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
}

Answer 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>

Answer 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.

诸若此类。

希望能帮上忙！