javascript - 如何限制复选框点击

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 method=post action=check.php>
  <table width=''250''align=center>
  <tr bgcolor=''#f1f1f1'' ><td >
  <input type=checkbox name=ckb value=1 onclick='chkcontrol(0)';></td><td >PHP</td></tr>
  <tr bgcolor=''#ffffff'' ><td >
  <input type=checkbox name=ckb value=2 onclick='chkcontrol(1)';></td><td >Perl</td></tr>
  <tr bgcolor=''#f1f1f1'' ><td >
  <input type=checkbox name=ckb value=3 onclick='chkcontrol(2)';></td><td >MySQL</td></tr>
  <tr bgcolor=''#ffffff'' ><td >
  <input type=checkbox name=ckb value=4 onclick='chkcontrol(3)';></td><td >ASP</td></tr>
  <tr bgcolor=''#f1f1f1'' ><td >
  <input type=checkbox name=ckb value=5 onclick='chkcontrol(4)';> 
  </td><td >JavaScript</td></tr>
  </table>
  </form>

上面的代码是有效的，但是当我使用

   <input type=checkbox name=ckb[] value=4 onclick='chkcontrol(3)';></td><td >ASP</td></tr>

它不工作

  I would like to store multiple value in array of php 

   <?php
   print_r($_POST['ckb']);
   ?>  

Answer 1

jsFiddle demo

P.S，不要使用内联 JS(它很难维护；尽量保持 JS 紧凑)；喜欢:

<input type=checkbox name=ckb[] value=1>

比 JS 会是:

var formCkb = document.form1["ckb[]"];

for(var i=0; i<formCkb.length; i++){
  formCkb[i].addEventListener("change", chkcontrol, false);
}

function chkcontrol() {
  var tot = 0;
  for(var i=0; i<formCkb.length; i++) tot += formCkb[i].checked;
  if(tot > 3){
      alert("Please Select only three"); 
      return this.checked = false ;
  }
}

_{遵循@PacMan 惊人的 UI 建议:}

以下是禁用剩余复选框的方法

...没有烦人的警报:

jsFiddle demo

var formCkb = document.form1["ckb[]"];

for (var i=0; i<formCkb.length; i++) {
    formCkb[i].addEventListener("change", chkcontrol, false);
}

function chkcontrol() {
    var tot=0, notChkd=[];
    for (var i=0; i<formCkb.length; i++) {
       if (formCkb[i].checked) tot += 1;
       else notChkd.push( formCkb[i] ); 
    }
    for(var i=0; i<notChkd.length; i++) notChkd[i].disabled = tot>=3;
}

notChkd 数组用于存储所有其他非检查 元素。 tot 计数器退出循环后，您可以使用 tot>=3 将剩余 复选框标记为已禁用作为 bool 值。