title: Need to count checkboxes on a button click on it does not work
body: <p>The following form has 11 checkboxes.. I set up the script to execute a function on the click of a button that would show a popup telling how many of the checkboxes were checked.. However, when I click the button, nothing happens. I think my mistake may be in the function code and discerning the use of name vs. id etc... But I am not sure about what the mistake was.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  body {background-color:Gray;}
  body {text-align:left;}
  p {text-align:center}
  
  &lt;/style&gt;
  
      &lt;title&gt;My First Project&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" &gt;
  
  &lt;table align=center&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="sausage" /&gt; Italian Sausage&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="mushrooms" /&gt; Fresh Mushrooms&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="pepperoni" /&gt; Pepperoni&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="onions" /&gt; Fresh Onions&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="ham" /&gt; Diced Ham&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="peppers" /&gt; Fresh Green Peppers&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="beef" /&gt; Beef&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="tomatoes" /&gt; Diced Tomatoes&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="bacon" /&gt; Bacon Bits&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="green" /&gt; Green Olives&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="olives" /&gt; Ripe Olives&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  
  &lt;script type="text/javascript"&gt;
  
          function anyCheck(form) {
              var total = 0;
              var max = form.ckbox.length;
              for (var idx = 0; idx &lt; max; idx++) {
                  if (eval("document.form.ckbox[" + idx + "].checked") == true) {
                      total++;
                  }
              }
              alert("You selected " + total + " boxes.");
          }
  
  
      }
  &lt;/script&gt;
  &lt;input type="button" name="submit" value="Submit" onclick="anyCheck(form1);"  /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATED CODE:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  body {background-color:Gray;}
  body {text-align:left;}
  p {text-align:center}
  
  &lt;/style&gt;
  
      &lt;title&gt;My First Project&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" &gt;
  
  &lt;table align="center"&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="sausage" /&gt; Italian Sausage&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="mushrooms" /&gt; Fresh Mushrooms&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="pepperoni" /&gt; Pepperoni&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="onions" /&gt; Fresh Onions&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="ham" /&gt; Diced Ham&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="peppers" /&gt; Fresh Green Peppers&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="beef" /&gt; Beef&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="tomatoes" /&gt; Diced Tomatoes&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="bacon" /&gt; Bacon Bits&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="green" /&gt; Green Olives&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="ingredients" value="olives" /&gt; Ripe Olives&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function anyCheck() {
      var form = document.getElementById("form1"),
          inputs = form.getElementsByTagName("input"),
          i,
          total = 0;
  
      for (i = 0; i &lt; inputs.length; i++) {
          if (inputs[i].type.toLowerCase() === "checkbox" &amp;&amp; inputs[i].checked)
              total++;
      }
      alert("You selected " + total + " boxes.");
  }
  
  
      }
  &lt;/script&gt;
  &lt;input type="button" name="submit" value="Submit" onclick="anyCheck();"  /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>