Web Analytics Made Easy -
StatCounter count checkboxes - help! - CodingForum


No announcement yet.

count checkboxes - help!

  • Filter
  • Time
  • Show
Clear All
new posts

  • count checkboxes - help!

    i'm sure this should be fairly easy, but I cannot get it to work!!
    I need to count the number of checkboxes which are ticked... my form is as follows

    <form id="myform" name="export_form_data">
    <input type="checkbox" name="processes[]" id="process_1">Process 1
    <input type="checkbox" name="processes[]" id="process_2">Process 2
    <input type="checkbox" name="processes[]" id="process_3">Process 3
    I have tried doing


    (using prototype the above eg)

    neither of which are working!
    I tried putting the square brackets in and that didnt work either!!

    how do I count the ticked boxes?!
    thanks for any help

    I have got it working using the following

    i = 0;
    		for (x=0;x<document.export_form_data.elements.length;x++) {
    			var form_element = document.export_form_data.elements[x];
    			//check the years one first
    			if (form_element.name == "processes[]") {
    				if (form_element.checked == true) {
    					//we have one ticked, so add it to the count
    but is there a better more efficient way?!

    Last edited by homerUK; Oct 4, 2006, 07:20 AM.

  • #2
    Object type: nodeList

    When you specify the same name for multiple form elements, you can refrence them as a nodeList.

    A nodeList is similar to an array in that they both have a length attribute, and their elements are ordered.

    However, to access a nodeList's elements you must use the item(index) function.

    Before we get started we'll need to remove the square braces "[ ]" from the names attributes of your check boxes.

    <form id="myform" name="export_form_data">
    	<input type="checkbox" name="processes" id="process_1">Process 1<br>
    	<input type="checkbox" name="processes" id="process_2">Process 2<br>
    	<input type="checkbox" name="processes" id="process_3">Process 3<br>
    	<input type="checkbox" name="processes" id="process_4">Process 4<br>
    	<input type="submit" value="Use W3C standard approach" onclick="alert('Number of checked boxes: '+countBoxes());">
    	<button onclick="alert('Number of checked boxes: '+warnCountBoxes())">Generates warnings in FF's JS Console.</button>
    <script type="text/javascript">
    	function countBoxes(){
    		var c = 0;
    		var i = 1;
    		while((p = document.getElementById('process_'+i++))!=null)
    		return c;
    	// Causes Warnings in NS browsers.
    	function warnCountBoxes(){
    		var c = 0;
    		p = export_form_data.processes;	//Cache value so we don't have to cause additional refrences in the loop (multiple dots eg: ex_fr_dat.proc.item(i) )
    		for(var i=p.length-1;i>-1;i--){	//Counting backwards is faster and doesn't require multiple lookups into p.length or a separate variable to test against.
    			if(p.item(i).checked)c++;	// Note: unroll the loop to make it even more efficient.
    		return c;
    	document.write("Number of checkboxes: "+export_form_data.processes.length+"<br>"); //also causes warning.
    However, only radio buttons should have the same name attributes because CGI does not guarantee the order of the named form elements in the query string. For this reason I have included another function that makes use of the getElementById function.