Solved

# Function that decrements a number on tick of checkbox

Posted on 2005-03-02
Medium Priority
295 Views
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.

0
Question by:minichicken
[X]
###### Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

• Help others & share knowledge
• Earn cash & points
• 2
• 2

LVL 32

Accepted Solution

Batalf earned 1400 total points
ID: 13439096
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>
<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>
<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

LVL 8

Assisted Solution

NETTY4 earned 600 total points
ID: 13439199
Here you go:

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

LVL 12

Author Comment

ID: 13439203
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

LVL 32

Assisted Solution

Batalf earned 1400 total points
ID: 13439225
change

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

to

if(startNo==-1){
obj.checked=false;
startNo = 0;
}
0

LVL 12

Author Comment

ID: 13439761
thanks guys :)

combined the two solutions...
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be \$37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
###### Suggested Courses
Course of the Month11 days, 10 hours left to enroll