current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

So I'm trying to use the following script:

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

So the first function will restrict the number of checkboxes you can select and the second will change the color of the cell background once checked. The HTML would be somthing like:

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

And at the end a have to add the next script:

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

Now, they both work perfectly alone but when I combine them only the one that restricts the number of checked boxes works. Is there a way to make them work together?

share|improve this question

2 Answers 2

up vote 0 down vote accepted

The problem is that when you call checkboxlimit, it's overwriting the click handler on those elements. What you probably want to do is call cambia from within your function that's checking the number of checked boxes:

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

That's assuming that you only want to call cambia provided the check is valid. Fiddle at http://jsfiddle.net/ultranaut/HN3Db/.

Also if it wasn't already clear, you can remove the onclick attributes in the html since they're getting overwritten anyway.

share|improve this answer
    
it kinda works but it only changes de color of the second column (checking either of the 3 boxes). When I write var fila = i instead of var fila = i+1 it only changes de bg of the first... –  Enric Tomás Oct 19 '13 at 20:52
    
My bad, fila needs to be set in an IIFE to avoid each instance passing the same parameter. I've edited my answer. –  ultranaut Oct 19 '13 at 21:48
    
Thanks! works beautifully –  Enric Tomás Oct 19 '13 at 23:45
up vote 0 down vote

why do you have to make two separate functions? You can call only one function and try putting an argument there.

share|improve this answer
    
In fact i dont need them separatly. I just used them on different proyects a while ago and thought that I could use them together on something im working now. I also try to make one script to do both things but still can get it through. –  Enric Tomás Oct 19 '13 at 20:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.