jeudi 23 juin 2016

Limiting user for number of checkboxes to checked

I am trying to develop a page in which there are many check boxes but user is restricted to check only 2 checkboxes. I got this code but it is not working as i am giving it a name as array. Please suggest how to use this name for check boxes when calling th javascript function.

<html>
<head>
<script type="text/javascript">

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

</script>
</head>
<body>

<form id="world" name="world">
<table>
<tr>
<td>
  <input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
  <label for="A11">A11</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|11' id="A10"  />
  <label for="A10">A10</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|10' id="A9"  />
  <label for="A9">A9</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|9' id="A8"  />
  <label for="A8">A8</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|6' id="A7"  />
  <label for="A7">A7</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|5' id="A6"  />
  <label for="A6">A6</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|4' id="A5"  />
  <label for="A5">A5</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|3' id="A4"  />
  <label for="A4">A4</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
  <label for="A3">A3</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
  <label for="A2">A2</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
  <label for="A1">A1</label>
</td>
</tr>
</table>
</form>
<script type="text/javascript">

checkboxlimit(document.forms.world.seatdata, 2)

 </script>
</body>
</html>




Aucun commentaire:

Enregistrer un commentaire