Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 301
  • Last Modified:

Function that decrements a number on tick of checkbox

Hi

I am looking for a function that will do this:

1.) I will predefine a number, eg 250. -> this need to be displayed, either in a readonly textbox or span or div....
2.) There will be about 1000 rows of record displayed in a table, each row will have a checkbox.
3.) On ticking the checkbox the number will decrease, i.e. 250 - 1
4.) On unticking the checkbox the number will increase, i.e. 250 + 1
5.) The user will not be able to tick anymore of the checkboxes if maximum is reached, i.e. 250 checked and the display will show 0
6.) Once the user has ticked the maximum (250) allowed records, only then he can submit the form. Nothing less and nothing more.

Thanks in advance.
0
minichicken
Asked:
minichicken
  • 2
  • 2
3 Solutions
 
BatalfCommented:
1.) I will predefine a number, eg 250. -> this need to be displayed, either in a readonly textbox or span or div....
2.) There will be about 1000 rows of record displayed in a table, each row will have a checkbox.
3.) On ticking the checkbox the number will decrease, i.e. 250 - 1
4.) On unticking the checkbox the number will increase, i.e. 250 + 1
5.) The user will not be able to tick anymore of the checkboxes if maximum is reached, i.e. 250 checked and the display will show 0
6.) Once the user has ticked the maximum (250) allowed records, only then he can submit the form. Nothing less and nothing more.


<html>
    <head>
    <script type="text/javascript">
   
    var maxItems = 25;
    var noBoxes = 50;
    function calculate(obj){
        var startNo=maxItems;
        for(var no=0;no<noBoxes;no++){
            var el = document.forms[0].elements['box['+no+']'];
            if(el.checked)startNo = startNo-1;
        }    
        if(startNo==0)obj.checked=false;
        if(startNo==0)document.forms[0].submitButton.disabled=false; else document.forms[0].submitButton.disabled=true;
        document.forms[0].sum.value = startNo;
    }
   
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="sum" value="25">
    <input type="submit" value="submitform" name="submitButton" disabled>    
   
<input type="checkbox" onclick="calculate(this)" name="box[0]" value="1"> Check 1<br>

<input type="checkbox" onclick="calculate(this)" name="box[1]" value="1"> Check 2<br>

<input type="checkbox" onclick="calculate(this)" name="box[2]" value="1"> Check 3<br>

<input type="checkbox" onclick="calculate(this)" name="box[3]" value="1"> Check 4<br>

<input type="checkbox" onclick="calculate(this)" name="box[4]" value="1"> Check 5<br>

<input type="checkbox" onclick="calculate(this)" name="box[5]" value="1"> Check 6<br>

<input type="checkbox" onclick="calculate(this)" name="box[6]" value="1"> Check 7<br>

<input type="checkbox" onclick="calculate(this)" name="box[7]" value="1"> Check 8<br>

<input type="checkbox" onclick="calculate(this)" name="box[8]" value="1"> Check 9<br>

<input type="checkbox" onclick="calculate(this)" name="box[9]" value="1"> Check 10<br>

<input type="checkbox" onclick="calculate(this)" name="box[10]" value="1"> Check 11<br>

<input type="checkbox" onclick="calculate(this)" name="box[11]" value="1"> Check 12<br>

<input type="checkbox" onclick="calculate(this)" name="box[12]" value="1"> Check 13<br>

<input type="checkbox" onclick="calculate(this)" name="box[13]" value="1"> Check 14<br>

<input type="checkbox" onclick="calculate(this)" name="box[14]" value="1"> Check 15<br>

<input type="checkbox" onclick="calculate(this)" name="box[15]" value="1"> Check 16<br>

<input type="checkbox" onclick="calculate(this)" name="box[16]" value="1"> Check 17<br>

<input type="checkbox" onclick="calculate(this)" name="box[17]" value="1"> Check 18<br>

<input type="checkbox" onclick="calculate(this)" name="box[18]" value="1"> Check 19<br>

<input type="checkbox" onclick="calculate(this)" name="box[19]" value="1"> Check 20<br>

<input type="checkbox" onclick="calculate(this)" name="box[20]" value="1"> Check 21<br>

<input type="checkbox" onclick="calculate(this)" name="box[21]" value="1"> Check 22<br>

<input type="checkbox" onclick="calculate(this)" name="box[22]" value="1"> Check 23<br>

<input type="checkbox" onclick="calculate(this)" name="box[23]" value="1"> Check 24<br>

<input type="checkbox" onclick="calculate(this)" name="box[24]" value="1"> Check 25<br>

<input type="checkbox" onclick="calculate(this)" name="box[25]" value="1"> Check 26<br>

<input type="checkbox" onclick="calculate(this)" name="box[26]" value="1"> Check 27<br>

<input type="checkbox" onclick="calculate(this)" name="box[27]" value="1"> Check 28<br>

<input type="checkbox" onclick="calculate(this)" name="box[28]" value="1"> Check 29<br>

<input type="checkbox" onclick="calculate(this)" name="box[29]" value="1"> Check 30<br>

<input type="checkbox" onclick="calculate(this)" name="box[30]" value="1"> Check 31<br>

<input type="checkbox" onclick="calculate(this)" name="box[31]" value="1"> Check 32<br>

<input type="checkbox" onclick="calculate(this)" name="box[32]" value="1"> Check 33<br>

<input type="checkbox" onclick="calculate(this)" name="box[33]" value="1"> Check 34<br>

<input type="checkbox" onclick="calculate(this)" name="box[34]" value="1"> Check 35<br>

<input type="checkbox" onclick="calculate(this)" name="box[35]" value="1"> Check 36<br>

<input type="checkbox" onclick="calculate(this)" name="box[36]" value="1"> Check 37<br>

<input type="checkbox" onclick="calculate(this)" name="box[37]" value="1"> Check 38<br>

<input type="checkbox" onclick="calculate(this)" name="box[38]" value="1"> Check 39<br>

<input type="checkbox" onclick="calculate(this)" name="box[39]" value="1"> Check 40<br>

<input type="checkbox" onclick="calculate(this)" name="box[40]" value="1"> Check 41<br>

<input type="checkbox" onclick="calculate(this)" name="box[41]" value="1"> Check 42<br>

<input type="checkbox" onclick="calculate(this)" name="box[42]" value="1"> Check 43<br>

<input type="checkbox" onclick="calculate(this)" name="box[43]" value="1"> Check 44<br>

<input type="checkbox" onclick="calculate(this)" name="box[44]" value="1"> Check 45<br>

<input type="checkbox" onclick="calculate(this)" name="box[45]" value="1"> Check 46<br>

<input type="checkbox" onclick="calculate(this)" name="box[46]" value="1"> Check 47<br>

<input type="checkbox" onclick="calculate(this)" name="box[47]" value="1"> Check 48<br>

<input type="checkbox" onclick="calculate(this)" name="box[48]" value="1"> Check 49<br>

<input type="checkbox" onclick="calculate(this)" name="box[49]" value="1"> Check 50<br>
   

    </form>
   
    </body>
</html>
0
 
NETTY4Commented:
Here you go:

<html>
<head>
<script>
var maxCheck = 5;
function checkBox(theBox){
  var elem = theBox.form.elements;
  var count = 0;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="checkbox" && elem[i].className=="checker"){
      if(elem[i].checked==true){
        count++;
        if(count>maxCheck){
          count--;
          theBox.checked = false;
          alert("Checkable count exhausted.");
          break;
        }
      }
    }
  }
  document.getElementById("boxLeft").innerHTML = maxCheck-count;
}
function init(){
  var elem = document.forms[0].elements;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="checkbox" && elem[i].className=="checker"){
      elem[i].onclick = function(){checkBox(this)};
    }
  }
  document.getElementById("boxLeft").innerHTML = maxCheck;
}
</script>
</head>
<body onLoad="init()">
Box left:
<span id="boxLeft"></span>
<form>
<input type=checkbox name="C1" class="checker">
<input type=checkbox name="C2" class="checker">
<input type=checkbox name="C3" class="checker">
<input type=checkbox name="C4" class="checker">
<input type=checkbox name="C5" class="checker">
<input type=checkbox name="C6" class="checker">
<input type=checkbox name="C7" class="checker">
<input type=checkbox name="C8" class="checker">
<input type=checkbox name="C9" class="checker">
</form>
</body>
</html>


0
 
minichickenAuthor Commented:
Hi Batalf

Thanks for the post.
The concept is all correct, but it does not let me tick the last checkbox. In your example. It only allow me to tick 24 boxes.

And may I also ask how would I display the counter without the readonly text box, but with span or div so it displays like other text on the page.

Thanks :)
0
 
BatalfCommented:
change

if(startNo==0)obj.checked=false;

to

if(startNo==-1){
   obj.checked=false;
   startNo = 0;
}
0
 
minichickenAuthor Commented:
thanks guys :)

combined the two solutions...
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now