基本多項答案測驗系統復選框歧義

Question

我正在嘗試建立一個基本的測驗系統，一切似乎都很好。

以下代碼顯示了用戶如何選擇正確答案， getresult.php顯示了結果。 在我的數據庫中，有一個問題，opt1，opt2，opt3 opt4 和 answer 列。

<form method="POST" action="getresult.php">
   <label>Enter Your Name:</label><br>
    <input type="text"  name="name" required><br><br>
<?php
    $db = new mysqli("localhost", "root", "","learndb");
    $stmt=$db->prepare("SELECT * FROM quiz");
    $stmt->execute();
    $result=$stmt->get_result();

        while($myrow = $result->fetch_assoc())
    {
        echo "<form method='POST' action='getresult.php'>";
    echo $myrow['id'];
    echo ".";   
    echo $myrow['question'];
    echo "<br>";
    echo "<input type='checkbox' name='mycheck[]' value=".$myrow['opt1'].">";
        echo $myrow['opt1'];
    echo "<br>";
    echo "<input type='checkbox' name='mycheck[]' value=".$myrow['opt2'].">";
    echo $myrow['opt2'];
        echo "<br>";
    echo "<input type='checkbox' name='mycheck[]' value=".$myrow['opt3'].">";
    echo $myrow['opt3'];
        echo "<br>";
    echo "<input type='checkbox' name='mycheck[]' value=".$myrow['opt4'].">";
    echo $myrow['opt4'];
        echo "<br><br>";

    }
?>
<input type="submit" name="submit" value="Get Results" class="btn btn-primary">

獲取結果文件

<?php
extract($_POST);
$db = new mysqli("localhost", "root", "","learndb");
$stmt=$db->prepare("SELECT * FROM quiz");
$stmt->execute();
$result=$stmt->get_result();
$myrow = $result->fetch_assoc();

$totalCheckboxChecked = sizeof($_POST['mycheck']);

$submit=isset($_POST['submit']);

$count=0;

if($submit)
{
    for($i=0;$i<$totalCheckboxChecked;$i++)
   {

               if($mycheck[$i]==$myrow['answer'])
        {   
            $count=$count+1;
        }

   }
    echo "Hello ";
    echo $_POST['name'];
    echo "<br>";
    echo "You scored ";
    echo $count;

}

現在問題出在復選框上，我可以檢查所有問題中的所有值。 當我使用單選按鈕時，我只能從所有問題中檢查一個值。 如何從一個問題中只檢查一個值。

Answer 1

如果您打算只允許一個選擇，我不知道為什么不使用單選按鈕，但是您可以設置一個限制，使復選框與某些 JavaScript（或 jQuery）具有相同的功能。

這是一個例子：見小提琴演示

var limit = 1;

$('input').on('change', function(event) { // this could've been a 'click' event too.

   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;

       /* OR you can do like:
           if($("input[name='mycheck']:checked").length > limit) { //... }
       */

   }

});

Answer 2

如果問題只包含一個答案，最好使用單選按鈕來選擇選項

要不然

使用此 jquery 從復選框中選擇單個值

$('input[type="checkbox"]').on('change', function() {
   $('input[type="checkbox"]').not(this).prop('checked', false);
});