在四個問題中僅選擇了一個單選按鈕

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。 名稱和ID必須唯一，以使HTML有效並可以按預期工作。 您可以將輸入名稱改為HTML數組 ，然后按該名稱進行分組。

使用數組的$key ，可以為每個答案組定義一個唯一的名稱。 我們還使用它來定義元素的ID，因為它們必須是唯一的。

所做的更改是，

• 在循環中包含$key
• 添加-<?php echo $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（如果不是，則基本上可以忽略這一點），則在與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.

等等。

希望能幫助到你！