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

【问题标题】：Limiting Checkbox Selection using JS and PHP使用 JS 和 PHP 限制复选框选择
【发布时间】：2018-11-01 23:11:23
【问题描述】：

我们要求将复选框的用户选择限制为最大。例如，我们从数据库中读取不同的汽车型号并将它们放在一个表单上，供用户选择最多两种汽车型号进行进一步处理。我们正在使用以下代码段（仅示例代码）：

<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 个以上的模型，也不会引发警告。

【问题讨论】：

标签： javascript php checkbox

【解决方案1】：

主要问题是因为您的 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>

【讨论】：

【解决方案2】：

试试这个

<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 不是数组，所以它会抛出错误 undefined "length" 属性。

【讨论】：

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