使用JS和PHP限制复选框选择

我们要求将用户选择的复选框限制为最大值。例如，我们从数据库中读取不同的汽车模型，并将它们放在表单上供用户选择最多两个汽车模型以供进一步处理。我们用下面的代码段（样本代码只）：使用JS和PHP限制复选框选择

<script type="text/javascript"> 
function KeepCount() 
{ 
    var total=0; 
    for (var i=0; i < document.car_form.model_selection.length; i++) 
    { 
     if(document.car_form.model_selection[i].checked) { 
      total =total + 1; 
     } 
     if (total > 2) { 
      alert('Pick Just One Please') 
      document.car_form.model_selection[i].checked = false ; 
      return false; 
     } 
    } 
} 
</script> 

<form action="car_model.php" method="post" name="car_form" id="car_form"> 

<?php 
$q10 = "SELECT ..." 
$r10 = mysqli_query ($dbc, $q10); 
if (mysqli_num_rows($r10) > 0) {  
    while ($row10 = mysqli_fetch_array($r10, MYSQLI_ASSOC)) 
    { 
     echo '<p class="normal_text"><input type="checkbox" name="model_selection[]" value="' . $row10['model_id'] . '" onclick="return KeepCount()"; />' . $row10['car_model_name'] . '</p></br>'; 
    } 
} 
?>  
</form>

此代码但不作为甚至如果用户选择超过2种型号工作，没有警告被抛出。

来源

2014-01-08 user2682369

与此

<script type="text/javascript"> 
      function KeepCount() {      
       var inputTags = document.getElementsByName('model_selection[]');      
       var total = 0; 

       for (var i = 0; i < inputTags.length; i++) { 

        if (inputTags[i].checked) {      
          total = total + 1; 
        } 

        if (total > 2) { 
         alert('Pick Just One Please') 
         inputTags[i].checked = false; 
         return false; 
        } 
       } 
      } 
    </script>

问题的上述代码尝试是不model_selection阵列所以它抛出错误未定义“长度”属性。

来源

2014-01-08 10:01:19

它确实工作 - 谢谢。我们现在有另一个问题1），其中，表单延伸了几页，并且在按下表单提交按钮之前需要记住复选框选择。即，当用户浏览表单的不同页面时，用户仍然应该能够看到他的复选框选择。如何实现这个请。问题2：如何启用CheckAll和重置选择。 – user2682369

主要问题是因为你的dom路径是错误的获取复选框。此代码应该可以遍历所有复选框。

<!doctype html> 
<html> 
    <head> 
    <title>Test</title> 
    </head> 
<body> 
<script type="text/javascript"> 
    function KeepCount() { 
    var elements = document.getElementsByName("model_selection[]"); 
    var total = 0; 
    for(var i in elements) { 
     var element = elements[i]; 
     if(element.checked) total++; 
     if(total>2) { 
      alert("pick one please"); 
      element.checked = false; 
      return false;  
     } 
    } 
    } 
    </script> 
    <form action="car_model.php" method="post" name="car_form" id="car_form"> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id1" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id2" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id3" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id4" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id5" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id6" onclick="return KeepCount()"></p> 
    </form> 
</body> 
</html>

来源

2014-01-08 09:57:11 cardeol

使用JS和PHP限制复选框选择

回答

相关问题