Question

我有一个表单，打印出存储在数据库中的问题列表。用户应该选择最多10个复选框，但似乎我的javascript被忽略。我是否在做一些基本的事情来让这个工作？我在使用LAMP的虚拟机中创建它。我已经尝试在Eclipse和浏览器中运行代码，但没有任何反应。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Question Selection</title>
        <script type="text/javascript">
            function chkcontrol(j) {
                var total = 0;
                for (var i = 0; i < document.questions.questions.length; i++) {
                    if (docment.questions.questions[i].checked) {
                        total = total + 1;
                    }
                    if (total > 10) {
                        alert("Please select only 10 questions");
                        document.questions.questions[i].checked = false;
                        return false;
                    }
                }   
            }
        </script>
    </head>
    <body>
        <?php echo "<br />"; ?>
        <form id="questions" name="questions" action="GenerateQuiz" method="post">
            <table border="2" style="margin:0 auto; padding:5px">
                <thead>
                    <tr>
                        <th>Questions</th>
                        <th>Include in Quiz</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                        $count = 1;
                        // Print a row for each record in the returned query
                        foreach($questionList as $key => $row) {
                            echo "
                                 <tr>
                                    <td style='text-align:left;'>$row[questionText]</td>
                                    <td style='text-align:center;'><input type='checkbox' name='questions[]' onclick='chkcontrol($count)' value='$row[questionText]' /></td>
                                 </tr>";
                            $count++;
                        }
                    ?>
                </tbody>
            </table>
            <div align="center">
                <br />
                <input type="submit" value="Take Quiz" />
            </div>
        </form>
    </body>
</html>

Answer 1

我在jquery中试过这个会更容易。我已经静态地创建了一些问题，您可以从数据库中循环问题。在这里，我限制用户只选择2个问题 $（＆＃39; .quesCheck：checked＆＃39;）。length＆gt; 2 。您可以将其更改为10

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.quesCheck',function()
    {
       if($('.quesCheck:checked').length > 2)
       {
            alert("Please select only 2 question");
            return false;
        }
    });
});
</script>
</head>
<body>
    <table>
        <tr><td>What is thunder ?</td><td><input type="checkbox" name='questions[]' class="quesCheck" /></td></tr>
        <tr><td>What is lightning?</td><td><input type="checkbox" name='questions[]' class="quesCheck" /></td></tr>
        <tr><td>What is chain reaction?</td><td><input type="checkbox" name='questions[]' class="quesCheck" /></td></tr>
     </table>
 </body>

Answer 2

GiaSuc::GiaSuc(): ten(""), soConSinh(0), soLitSua(0) { ... }

你的chkcontrol功能应该是什么样的。你不需要jQuery来做到这一点，你大部分都在那里！

请参阅此处的工作示例： https://jsfiddle.net/wr58739c/4/

Answer 3

尝试使用您的脚本：

<script type="text/javascript">
        function chkcontrol(j) {
            var checkboxes = document.querySelectorAll('#questions input[type="checkbox"][name="questions[]"]');
            var total = 0;
            for (var i = 0; i < checkboxes.length; i++) {
                if (document.checkboxes[i].checked) {
                    total = total + 1;
                }
                if (total > 10) {
                    alert("Please select only 10 questions");
                    document.checkboxes[i].checked = false;
                    return false;
                }
            }
        }
    </script>

使用该代码，您可以确保从正确的表单中获得正确的复选框。

无法限制所选复选框的数量（尝试多个片段）

3 个答案: