# Dynamic checkbox count

**URL:** <https://forum.kirupa.com/t/dynamic-checkbox-count/265508>\
**Category:** web dev\
**Created:** [July 9, 2008, 6:06pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508 "2008-07-09T18:06:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![stiffi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@stiffi](https://forum.kirupa.com/u/stiffi)\
**Post date:** [July 9, 2008, 6:06pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/1 "2008-07-09T18:06:00Z")

</div>

hi all

i have been struggling with this for weeks n honestly i think Im going to go mad if i dont find a solution

ok i have a page with with a form which dymanically generates the input fields (checkboxes) whish is all done in PHP

what I need to do is count the different fields and alert the number of TICKED checkboxes. what i have so far is counting the number of dynamically generated checkboxes in each product but it wont count the checked fields, This i have been doing in Javascript.

```auto

 <?    
$sql="SELECT name FROM table WHERE type='product1'";
$result=mysql_query($sql);
         // Show records by while loop.
 while($myrow=mysql_fetch_array($result)){
 
  
?>
<input name="product1" type="checkbox" id="product1" value="<?php echo $myrow['name'];?> ">- <?php echo $myrow['name']; ?>
<br />
<?php
// End while loop.

}
?>

<script type="text/javascript">
function countBoxes(){
var c = 0;
var i = 1;
while((p = document.getElementById('product1'+i++))!=null)
if(p.checked)c++;
return c;
}
// Causes Warnings in NS browsers.
function warnCountBoxes(){
var c = 0;
p = export_form_data.product1;  
for(var i=p.length-1;i>-1;i--){ 
if(p.item(i).checked)c++; 
}
return c;
}
document.write("Number of meats available: "+export_form_data.product1.length+"<br>");
</script>

```

if anyone could help me alert the number of ticked checkboxes please i know that its this line that needs to be edited but cant figure out how to

```auto

while((p = document.getElementById('product1'+i++))!=null)
if(p.checked)c++;
return c;

```

would i change get product by ID?

Thanks in advance  
:crying:

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [July 9, 2008, 7:11pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/2 "2008-07-09T19:11:24Z")

</div>

Try this:

```auto
var cb = document.getElementsByTagName('input');
var checked = 0;
function countCB()
{
 for(i = 0; i < cb.length; i++)
 {
    if(cb*.type == 'checkbox' && cb.checked)
    {
        ++checked;
    }
  }
  return checked;
}

```

---

<div class="post-metadata">

**Author:** ![stiffi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@stiffi](https://forum.kirupa.com/u/stiffi)\
**Post date:** [July 9, 2008, 11:19pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/3 "2008-07-09T23:19:37Z")

</div>

thanks actionAction but when I inserted your code the alert didnt work anymore?

---

<div class="post-metadata">

**Author:** ![kdd](https://avatars.discourse-cdn.com/v4/letter/k/ecb155/32.png) [@kdd](https://forum.kirupa.com/u/kdd)\
**Post date:** [July 9, 2008, 11:21pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/4 "2008-07-09T23:21:41Z")

</div>

alert(countCB());

---

<div class="post-metadata">

**Author:** ![stiffi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@stiffi](https://forum.kirupa.com/u/stiffi)\
**Post date:** [July 10, 2008, 8:46pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/5 "2008-07-10T20:46:26Z")

</div>

thanks a mill Kdd that counts them but still the checked boxes = 0

---

<div class="post-metadata">

**Author:** ![jwilliam](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@jwilliam](https://forum.kirupa.com/u/jwilliam)\
**Post date:** [July 10, 2008, 9:01pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/6 "2008-07-10T21:01:14Z")

</div>

Hmmm… maybe something like this:

```auto

window.onload = function()
{
  alert(countCB());
}

```

Or something more useful (quick and dirty), add this to your html:

```auto

<input type="button" value="Count Checkboxes" onclick="alert(countCB());" />

```

---

<div class="post-metadata">

**Author:** ![stiffi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@stiffi](https://forum.kirupa.com/u/stiffi)\
**Post date:** [July 13, 2008, 6:07pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/7 "2008-07-13T18:07:16Z")

</div>

i figured out the reason why it wont work but maybe I’m in the wrong form posting for this but i started posting here first and i dont want to double post

When my form is outputted to the mail it shows

meat = whatever is chosen  
meat = whatever is chosen

and so on

what i need for it to count properly is

meat0 = whatever is chosen  
meat1 = whatever is chosen

then it should be able to could properly

is there a way of changing the value of the array to add a number to this code

```php

<input name="meat" type="checkbox" id="meat" value="<?php echo $myrow['name'];?> " >- <?php echo $myrow['name']; ?> 

```

would it be id = [0]  
or id = meat [0]  
or id = [meat]  
or meat = [0] i++

I’M GOING A BIT :krazy:

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [July 13, 2008, 9:44pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/8 "2008-07-13T21:44:53Z")

</div>

POSTing forms doesn’t submit the id, it submits the name of the element. I don’t think you want to alter the array member just to output a number. I have to assume that you are making a certain number of elements based on user input or on the number of available meats from a db, and you use a loop to make the input boxes. Maybe this is what you are looking for:

```php

<?php
//assuming $_POST['number_of_meats'] is the number you are using to create checkboxes
for($i = 0; $i < $_POST['number_of_meats']; $i++)
{
     echo '<input name="meat' . $i . '" type="checkbox" id="meat' . $i . '" value="' . $myrow['name'] . '" />- ' . $myrow['name'];
}
?>

```

---

<div class="post-metadata">

**Author:** ![stiffi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@stiffi](https://forum.kirupa.com/u/stiffi)\
**Post date:** [July 15, 2008, 8:18pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/9 "2008-07-15T20:18:13Z")

</div>

[FONT=Arial][SIZE=2][COLOR=navy][COLOR=navy][FONT=Arial][/FONT][/COLOR][/COLOR][/SIZE][/FONT]  
Thanks all of you so much esp actionAction

thhis is the code that counts in the end incase anyone is looking for it

```php

<?    
$sql="SELECT * FROM table WHERE type='meat'";
$result=mysql_query($sql);
         // Show records by while loop.
$i = 0;
 while($myrow=mysql_fetch_array($result)){
 
//echo 'test';
     echo '<input name="meat' . $i . '" type="checkbox" id="meat' . $i . '" value="' . $myrow['name'] . '" />- ' . $myrow['name'];

$i++;
}
?>
<SCRIPT language="JavaScript">
var cb = document.getElementsByTagName("input");
var checked = 0;
function countCB()
{
 for(i = 0; i < cb.length; i++)
 {
    if(cb*.type == 'checkbox' && cb*.checked)
    {
        ++checked;
    }
  }
  return checked;
}

alert(countCB());
</SCRIPT>

```

Again thanks you all for your contuined help

---

<div class="post-metadata">

**Author:** ![stiffi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@stiffi](https://forum.kirupa.com/u/stiffi)\
**Post date:** [July 15, 2008, 11:05pm UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/10 "2008-07-15T23:05:56Z")

</div>

Hi actionAction

thank you so much for you help so far

I was just wondering if there was a way to count specific fields as I have multiple sections of checkboxes and I want to count them separately

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [July 16, 2008, 6:35am UTC](https://forum.kirupa.com/t/dynamic-checkbox-count/265508/11 "2008-07-16T06:35:47Z")

</div>

Hi Stef, no problem!

Yes, there is a way, just add a condition in there to check the name, or id of your checkboxes (you could even pass that as a function parameter to make your code stay clean.

```auto

<script language="JavaScript">
function countCB( name )
{
 var cb = document.getElementsByTagName("input");
 var checked = 0;
 for(i = 0; i < cb.length; i++)
 {
    if(cb*.type == 'checkbox' && cb*.checked && cb*.name == name)
    {
        ++checked;
    }
  }
  return checked;
}

alert(countCB('checkbox_name_value'));
</script>

```