在同一个复选框上使用2个不同的脚本

时间:2013-10-19 19:57:00

标签: javascript html checkbox background limit

所以我正在尝试使用以下脚本:

//Limit of checked checkboxes    
function checkboxlimit(checkgroup, limit){
  var checkgroup=checkgroup
  var limit=limit
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].onclick=function(){
      var checkedcount=0
      for (var i=0; i<checkgroup.length; i++)
          checkedcount+=(checkgroup[i].checked)? 1 : 0
      if (checkedcount>limit){
        alert("You can only select a maximum of "+limit+" checkboxes")
        this.checked=false
      }
    }
  }
}

//change bg color if checked 
var seleccionado=new Array()
function cambia(fila){
  if(seleccionado[fila]!=true)
  {
    document.getElementById("fila"+fila).style.background='#A5FA9B';
    document.getElementById("fila"+fila).style.color='#FFFFFF';
    seleccionado[fila]=true;
  }
  else
  {
    document.getElementById("fila"+fila).style.background='#FFF3D6';
    document.getElementById("fila"+fila).style.color='#000000';
    seleccionado[fila]=false;
  } 
}

因此,第一个函数将限制您可以选择的复选框的数量,第二个函数将在检查后更改单元格背景的颜色。 HTML会像:

<form id="main" name="main" method="POST">
  <font face="verdana">
    <table>
      <tr  >
        <td  id="fila1">FIRST<input name="ckb" onclick="cambia(1)" type="checkbox"/></td>
        <td  id="fila2">SECOND<input name="ckb" onclick="cambia(2)" type="checkbox"/></td>
        <td  id="fila3">THIRD<input name="ckb" onclick="cambia(3)" type="checkbox"/></td> 
    </table>
  </font>
</form>

最后,我必须添加下一个脚本:

<script type="text/javascript">
  checkboxlimit(document.forms.main.ckb, 1);
</script>

现在,它们都完全独立工作,但是当我将它们组合起来时,只有限制复选框数量的工作。有没有办法让它们一起工作?

2 个答案:

答案 0 :(得分:0)

为什么你要做两个独立的功能?你只能调用一个函数并尝试在那里加一个参数。

答案 1 :(得分:0)

问题在于,当你调用checkboxlimit时,它会覆盖这些元素上的点击处理程序。您可能想要做的是从您的函数中调用cambia来检查复选框的数量:

function checkboxlimit(checkgroup, limit){
  var checkgroup=checkgroup
  var limit=limit
  for (var i=0; i<checkgroup.length; i++) {
    var fila = i + 1;
    checkgroup[i].onclick=(function(fila){
      return function () {
        var checkedcount=0
        for (var i=0; i<checkgroup.length; i++)
            checkedcount+=(checkgroup[i].checked)? 1 : 0
        if (checkedcount>limit){
          alert("You can only select a maximum of "+limit+" checkboxes")
          this.checked=false
        } else {
          cambia(fila);
        }
      }
    }(fila));
  }
}

假设您只想在支票有效的情况下拨打cambia。在http://jsfiddle.net/ultranaut/HN3Db/处小提琴。

此外,如果还不清楚,您可以删除html中的onclick属性,因为它们无论如何都会被覆盖。