为什么复选框中的限制不起作用？

Question

我需要将选中复选框的数量限制为三个，但它不起作用。

这是我的代码：

<script type="text/javascript"> 
function chkcontrol(j) {
   var total=0;
   for(var i=0; i < document.form1.ckb.length; i++){
      if(document.form1.ckb[i].checked){
         total =total +1;}
      if(total > 3){
         alert("Please Select only three"); 
         document.form1.ckb[j].checked = false ;
         return false; }
   }
}
</script>

    <form name="form1">
<input type="checkbox" name="ckb[]" value="0" onclick="chkcontrol(0);">
<input type="checkbox" name="ckb[]" value="1" onclick="chkcontrol(1);">
<input type="checkbox" name="ckb[]" value="2" onclick="chkcontrol(2);">
<input type="checkbox" name="ckb[]" value="3" onclick="chkcontrol(3);">    
    </form>   

你可以在in this Fiddle上测试它。

如果我使用name="ckb"而不是name="ckb[]"，它确实可以工作，但我需要使用name="ckb[]"，因为在PHP中，我有以下代码来提取值：

   foreach($_POST['ckb'] as $value){

   }

Answer 1

我可以建议一个更好的方法来处理这个问题吗？

var form = document.getElementsByName("form1")[0];

form.addEventListener("click", function(event) {
     if (event.target.tagName != "INPUT" || event.target.type != "checkbox") {
         return;
     }

     var checked = form.querySelectorAll("input[type='checkbox']:checked");

     if (checked.length > 3) {
           event.target.checked = false;
     }

});

jsFiddle。

• 你不应该真的使用内联事件处理程序，当它们不是必需的时候，你现在有4个复选框，所以我通过只附加一个事件监听器
• 来处理表单上的事件，你可能会发现使用更现代的方法来选择元素也更容易

Answer 2

您正在循环遍历名为ckb的表单控件，但您没有它们。您的控件的名称是ckb[]。

您需要使用ckb[]作为属性名称。

由于标识符中不允许使用[和]，因此必须使用方括号表示法。

form1['ckb[]']

Answer 3

你需要做的几件重要的事情-

1. 将this对象作为参数传递给函数。这样你就有了一个更好的控件，而不需要在你的code.
2. var total中使用chkb[]，所以你不需要每次都循环。
3. 你需要确保其他复选框集(不属于chkb[])不受你的代码的影响。
4. 将onclick更改为onchange。你还需要你的网站对键盘活动做出回应。

查看我的解决方案- jsFiddle

<script type="text/javascript">
var total=0;
function chkcontrol(chkb) {
   if(chkb.checked){
     if(total >= 3 ){
         chkb.checked=false;    
         alert("Please Select only three");
      } else{
         total=total+1;
      } 
    } else {
        total=total-1;
    }
}
</script>

<form name="form1">
<input type="checkbox" name="ckb[]" value="0" onchange="chkcontrol(this);">
<input type="checkbox" name="ckb[]" value="1" onchange="chkcontrol(this);">
<input type="checkbox" name="ckb[]" value="2" onchange="chkcontrol(this);">
<input type="checkbox" name="ckb[]" value="3" onchange="chkcontrol(this);">    
</form>