不能限制（試過多個片段）選擇複選框的數量

我打印出存儲在數據庫中的問題列表的形式。用戶應該選擇最多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>

來源

2016-05-14 slickset

我在我的代碼實現，「文件」是拼寫錯誤。我糾正了這一點，但它並沒有使代碼正常工作。 – slickset

檢查你一個拼寫錯誤在這裏如果'（docment.questions.questions [I] .checked）{...'你缺少一個「O」文件 –

抓到，我覺得就像你正在鍵入您的評論。雖然沒有運氣。 – slickset

chkcontrol = function(j) { 
    var total = 0; 
    var questions = document.getElementsByName('questions[]'); 
    for (var i = 0; i < questions.length; i++) { 
     if (questions[i].checked) { 
      total = total + 1; 
     } 
     if (total > 10) { 
      alert("Please select only 10 questions"); 
      questions[i].checked = false; 
      return false; 
     } 
    } 
}

是您的chkcontrol功能應該是什麼樣子。你不需要jQuery來做到這一點，你是大多數的方式！

看到這裏工作的例子： https://jsfiddle.net/wr58739c/4/

來源

2016-05-14 04:41:21 sheeldotme

謝謝你，這段代碼完美地工作。我搜索了幾個網站來學習如何做，但語法看起來不正確。 – slickset

我試過這個在jquery中會容易得多。我靜態地創建了一些問題，並且可能會從數據庫中循環回答您的問題。在這裏，我限制用戶只選擇2個問題$（'。quesCheck：checked'）。length> 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>

來源

2016-05-14 04:40:56

與你的腳本試試這個：

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

與該代碼可以確保您從正確的形式得到正確的複選框。

來源

2016-05-14 04:46:43

不能限制（試過多個片段）選擇複選框的數量

回答

相關問題