www.webdeveloper.com
Results 1 to 7 of 7

Thread: How to count checkboxes checked...

  1. #1
    Join Date
    Feb 2004
    Posts
    35

    How to count checkboxes checked...

    Hi all, I want to know how to count how many checkboxes checked by user, the result will be processed in submit.asp and then timed with number 2. Lastly, the final result will be displayed to the user. I need the code in JavaScript. Please Help me....


    PHP:
    --------------------------------------------------------------------------------

    <html>

    <body>
    <form action="submit.asp" name="submit" method="post">
    <p><h3>Stage 1</h3>
    <input type="checkbox" name="cb" value="ON"><br>
    <input type="checkbox" name="cb" value="ON"><br>
    <input type="checkbox" name="cb" value="ON"><br>
    <input type="checkbox" name="cb" value="ON"><br>
    <input type="checkbox" name="cb" value="ON"><br>
    <input type="reset" name="cmdreset" value="Reset">
    <input type="Submit" name="cmdsubmit" value="Submit">
    </P>
    </form>
    </body>

    </html>

  2. #2
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    PHP Code:
    function countCheckboxes(form) {
      var 
    obj;
      var 
    count 0;
      for (var 
    i=0i<form.elements.lengthi++) {
        
    obj form.elements[i];
        if (
    obj.type == "checkbox" && obj.checked) {
          
    count++;
        }
      }
      
    alert("Count: " count);


  3. #3
    Join Date
    Feb 2004
    Posts
    35
    Thanks Buddy......

  4. #4
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    The following only works in Mozilla due to the fact that Mozilla is the only browser in which can prototype DOM interfaces, but it is indeed some very cool scripting nonetheless.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>untitled</title>
    		<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    		<script type="text/javascript">
    		//<![CDATA[
    			HTMLFormElement.prototype.howManyChecked = function(n)
    			{
    				var group = document.getElementsByName(n), j = 0;
    
    				for(i=0; i<group.length; i++) if(group[i].type.toLowerCase() == 'checkbox' && group[i].checked) j++;
    
    				return j;
    			}
    
    			function foo()
    			{
    				alert(document.forms[0].howManyChecked('a'));
    				return false;
    			}
    
    			function bar()
    			{
    				alert(document.forms[1].howManyChecked('b'));
    				return false;
    			}
    		//]]>
    		</script>
    	</head>
    	<body>
    		<form action="#" onsubmit="return foo();">
    			<div>
    				<h1>Group 1</h1>
    				<ul>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    					<li><input type="checkbox" name="a" /></li>
    				</ul>
    				<input type="submit" value="Submit" />
    			</div>
    		</form>
    		<form action="#" onsubmit="return bar();">
    			<div>
    				<h1>Group 2</h1>
    				<ul>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    					<li><input type="checkbox" name="b" /></li>
    				</ul>
    				<input type="submit" value="Submit" />
    			</div>
    		</form>
    	</body>
    </html>
    Last edited by fredmv; 02-18-2004 at 09:47 PM.

  5. #5
    Join Date
    Feb 2004
    Posts
    35

    What happen to my code...??

    I want it to display how many checkboxes checked for every stage... My program doesn't work... I've no idea... bcoz i'm not fimiliar with this scripting.

    PHP Code:
    <BODY>
    <
    P
    <
    META content="Microsoft Visual Studio 6.0" name=GENERATOR>
    <
    SCRIPT type=text/javascript>
    function 
    countCheckboxes(a

      var 
    obj
      var 
    count1 0;
      var 
    count2 0;
      var 
    checkbox;
      for (var 
    e=0e<2e++)
      {
        for (var 
    i=0i<a.elements.lengthi++) 
        { 
    obj a.elements[i]; 
          if (
    obj.name == "cb"&&& obj.checked)
             { 
    checkbox "cb"&e
                            
    if (checkbox == "cb0")
                  {
    count1++;}
                else {
    count2++;}}}  
      }
      
    alert("Stage 1: " count1);
      
    alert("Stage 2: " count2); 
    }

    </SCRIPT></P>
    <P>
    <FORM name=submit action=submit.asp method=post></P>
    <P>
    <H3>Stage 1</H3>
    <P>
    <INPUT type=checkbox value=ON name=cb0><BR>
    <INPUT type=checkbox value=ON name=cb0><BR>
    <INPUT type=checkbox value=ON name=cb0><BR>
    <INPUT type=checkbox value=ON name=cb0><BR>
    <INPUT type=checkbox value=ON name=cb0><BR>
    <br>
    <H3>Stage 2</H3>
    <INPUT type=checkbox value=ON name=cb1><BR>
    <INPUT type=checkbox value=ON name=cb1><BR>
    <INPUT type=checkbox value=ON name=cb1><BR>
    <INPUT type=checkbox value=ON name=cb1><BR>
    <INPUT type=checkbox value=ON name=cb1><BR>
    <INPUT onclick=countCheckboxes(form) type=button value=Count name=cmdCount> 
    </FORM></P>

    </BODY> 
    Last edited by JohnJava; 02-19-2004 at 02:29 AM.

  6. #6
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta name="Content-Script-Type" content="text/javascript">
    <
    title>Sample</title>
    <
    script type="text/javascript">
    <!--
      function 
    countCheckboxes(form) {
        var 
    obj;
        var 
    count1=0;
        var 
    count2=0;

        for (var 
    i=0i<form.elements.lengthi++) {
          
    obj form.elements[i];
          if (
    obj.type == "checkbox" && obj.checked) {
            if (
    obj.name == "cb0") {
              
    count1++;
            }
            else {
              
    count2++;
            }
          }
        }
        
    alert("Stage 1: " count1 ", Stage 2: " count2);
      }
    // -->
    </script>

    <div style="text-align: center;">
      <strong>Sample</strong>
    </div>

    <form action="#">
    <p>
      <strong>Stage 1</strong><br>
      <input type="checkbox" value="ON" name="cb0"><br>
      <input type="checkbox" value="ON" name="cb0"><br>
      <input type="checkbox" value="ON" name="cb0"><br>
      <input type="checkbox" value="ON" name="cb0"><br>
      <input type="checkbox" value="ON" name="cb0">
    </p>

    <p>
      <strong>Stage 2</strong><br>
      <input type="checkbox" value="ON" name="cb1"><br>
      <input type="checkbox" value="ON" name="cb1"><br>
      <input type="checkbox" value="ON" name="cb1"><br>
      <input type="checkbox" value="ON" name="cb1"><br>
      <input type="checkbox" value="ON" name="cb1"><br>
    </p>

    <p style="text-align: center;">
      <input type="button" name="btn1" value="Check" onClick="countCheckboxes(this.form)">
    </p>
    </form> 

  7. #7
    Join Date
    Feb 2004
    Posts
    35
    Thanks Buddy...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles