2

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

这是我的代码：

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

你可以在这个 Fiddle中测试它。

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

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

   }
4

3 回答 3

1

您正在循环命名ckb但没有它们的表单控件。您的控件的名称是ckb[].

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

由于标识符中不允许使用 and ，因此您必须使用方括号表示法来执行此操作[。]

form1['ckb[]']

于 2013-05-17T06:44:36.753 回答
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;
     }

});

js小提琴。

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

  • 当不需要时，您不应该真正使用内联事件处理程序
  • 您现在有 4 个复选框，所以我通过仅附加一个事件侦听器来处理表单上的事件
  • 您可能会发现使用更现代的选择元素的方法也更容易
于 2013-05-17T06:47:17.070 回答
-1

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

你需要做的一些重要的事情——

  1. this将对象作为参数传递给您的函数。这样，您无需chkb[]在代码中使用即可获得更好的控制。

  2. var total需要全局化，所以你不需要每次都循环。

  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>
于 2013-05-17T07:22:05.340 回答