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计数器退出循环后，您可以使用disabled作为布尔值将剩余的复选框标记为tot>=3。

Answer 2

可能你可以试试这个：

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

Answer 3

您可以采用更清晰的实施方式

<input type = checkbox name = 'ckb' value = 1 onclick = 'chkcontrol(this)'> 

function chkcontrol(obj) {
    var checkedLen = 0, checkBoxes = document.getElementsByName(obj.name);
    for(var i = 0; i < checkBoxes.length; i++) {
        if(checkBoxes[i].checked) {
            checkedLen++;
        }
        if(checkedLen > 3) {
            alert("Please Select only three") ;
            obj.checked = false;
            return;
        }
    }
}

Answer 4

对不起，我只知道C. 但必须有一些叫做计时器的东西。它将继续运行您希望它运行的代码。您可以保留已选中复选框的签到号

如何限制复选框点击

4 个答案:

以下是如何禁用其余复选框