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

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

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

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

form1['ckb[]']

Answer 2

我可以提出一个更好的方法来解决这个问题吗？

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

您的JavaScript代码和HTML存在许多问题。

如果没有必要，您不应该使用内联事件处理程序
您现在有4个复选框，因此我只通过附加一个事件监听器来处理表单上的事件
您可能会发现使用更现代的方法选择元素也更容易

Answer 3

虽然问题已经回答，但我无法阻止自己发布这种替代解决方案。

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

将this个对象作为参数传递给您的函数。这样你有一个更好的控制，而无需在你的内部使用chkb[] 代码
var total需要全局化，因此您不需要每次都循环。
您需要确保其他一组复选框（不属于chkb[]）（如果有）不受您的代码影响。
将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>

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

3 个答案: