复选框单击的限制

how limit on checkbox click

本文关键字：单击 复选框      更新时间：2023-09-26

我想选中最多两个复选框，然后单击后它将显示消息。我实现了代码，当我不使用数组时，它在复选框中使用数组时它不会 work.my 代码是：

  <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']);
   ?>

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 建议：

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

。没有烦人的警报：

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, 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作为布尔值将其余复选框标记为disabled。

也许你可以试试这个：

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

你可以采用一个更清晰的实现，比如

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

很抱歉我只知道C。但一定有一种东西叫做计时器。它将继续运行您希望它运行的代码。您可以保留选中的复选框的签入号

相关文章：