Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    22
    Thanks
    11
    Thanked 0 Times in 0 Posts

    CheckBox Progress Bar

    What I currently have is: For every checkbox you check, it adds + 1 to the progress. But how do I make it so that each checkbox has different value? Example, checkbox1 will give +5 to the progress, while checkbox2 will give +25.

    Code:
    <html>
      <head>
        <script type="text/javascript">
          function countCheckboxes ( ) {
            var form = document.getElementById('testForm');
            var count = 0;
            for(var n=0;n < form.length;n++){
              if(form[n].name == 'items[]' && form[n].checked){
                count++;
              }
            }
            document.getElementById('checkCount').innerHTML = count;
    		document.getElementById('bar').style.width = (count * 50) + "px";
          }
          window.onload = countCheckboxes;
    	  
    	  function checkAll(formname, checktoggle)
    		{
    		  var checkboxes = new Array(); 
    		  checkboxes = document[formname].getElementsByTagName('input');
    		 
    		  for (var i=0; i<checkboxes.length; i++)  {
    			if (checkboxes[i].type == 'checkbox')   {
    			  checkboxes[i].checked = checktoggle;
    			}
    		  }
    		  countCheckboxes();
    		}
        </script>
      </head>
      <body>
        <form name="testForm" id="testForm">
          <input type="checkbox" name="items[]" value="a" onclick="countCheckboxes()" /> A<br />
          <input type="checkbox" name="items[]" value="b" onclick="countCheckboxes()" /> B<br />
          <input type="checkbox" name="items[]" value="c" onclick="countCheckboxes()" /> C<br />
          <input type="checkbox" name="items[]" value="d" onclick="countCheckboxes()" /> D<br />
          <input type="checkbox" name="items[]" value="e" onclick="countCheckboxes()" /> E<br />
          <input type="checkbox" name="items[]" value="f" onclick="countCheckboxes()" /> F<br />
          <input type="checkbox" name="items[]" value="g" onclick="countCheckboxes()" /> G<br />
          <span id="checkCount"></span>
        </form>
    	<div id="bar" style="width:0px; max-width:500px; height: 20px; background: #000;"></div><br/>
    	
    	<a href="javascript:void();" onclick="javascript:checkAll('testForm', true);">check all</a>
    	<a href="javascript:void();" onclick="javascript:checkAll('testForm', false);">uncheck all</a>
      </body>
    </html>
    Last edited by Undisclosed; 07-09-2013 at 08:40 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <html>
      <head>
        <script type="text/javascript">
    
          var values=[['a',5],['b',2],['c',1],['d',3],['e',2],['f',1],['g',2]]
    
          function countCheckboxes ( ) {
            var form = document.getElementById('testForm');
            var count = 0;
            for(var n=0;n < form.length;n++){
              if(form[n].name == 'items[]' && form[n].checked){
                for (var z0=0;z0<values.length;z0++){
                 if (form[n].value==values[z0][0]){
                  count+=values[z0][1];
                  break;
                 }
                }
              }
            }
            document.getElementById('checkCount').innerHTML = count;
    		document.getElementById('bar').style.width = (count * 50) + "px";
          }
          window.onload = countCheckboxes;
    
    	  function checkAll(formname, checktoggle)
    		{
    		  var checkboxes = new Array();
    		  checkboxes = document[formname].getElementsByTagName('input');
    
    		  for (var i=0; i<checkboxes.length; i++)  {
    			if (checkboxes[i].type == 'checkbox')   {
    			  checkboxes[i].checked = checktoggle;
    			}
    		  }
    		  countCheckboxes();
    		}
        </script>
      </head>
      <body>
        <form name="testForm" id="testForm">
          <input type="checkbox" name="items[]" value="a" onclick="countCheckboxes()" /> A<br />
          <input type="checkbox" name="items[]" value="b" onclick="countCheckboxes()" /> B<br />
          <input type="checkbox" name="items[]" value="c" onclick="countCheckboxes()" /> C<br />
          <input type="checkbox" name="items[]" value="d" onclick="countCheckboxes()" /> D<br />
          <input type="checkbox" name="items[]" value="e" onclick="countCheckboxes()" /> E<br />
          <input type="checkbox" name="items[]" value="f" onclick="countCheckboxes()" /> F<br />
          <input type="checkbox" name="items[]" value="g" onclick="countCheckboxes()" /> G<br />
          <span id="checkCount"></span>
        </form>
    	<div id="bar" style="width:0px; max-width:500px; height: 20px; background: #000;"></div><br/>
    
    	<a href="#" onclick="checkAll('testForm', true); return false;">check all</a>
    	<a href="#" onclick="checkAll('testForm', false); return false;">uncheck all</a>
      </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Undisclosed (07-09-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,149
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Another way:-

    Code:
    <html>
      <head>
        <script type="text/javascript">
          function countCheckboxes ( ) {
          var cumnum = 0;
            var form = document.getElementById('testForm');
            var count = 0;
            for(var n=0;n < form.length;n++){
              if(form[n].name == 'items[]' && form[n].checked){
                count++;
    var x = form[n].value.substring(1);
    cumnum += Number(x);
              }
            }
            document.getElementById('checkCount').innerHTML = count;
    		document.getElementById('bar').style.width = cumnum + "px";
          }
          window.onload = countCheckboxes;
    	  
    	  function checkAll(formname, checktoggle)
    		{
    		  var checkboxes = new Array(); 
    		  checkboxes = document[formname].getElementsByTagName('input');
    		 
    		  for (var i=0; i<checkboxes.length; i++)  {
    			if (checkboxes[i].type == 'checkbox')   {
    			  checkboxes[i].checked = checktoggle;
    			}
    		  }
    		  countCheckboxes();
    		}
        </script>
      </head>
      <body>
        <form name="testForm" id="testForm">
          <input type="checkbox" name="items[]" value="a10" onclick="countCheckboxes()" /> A<br />
          <input type="checkbox" name="items[]" value="b25" onclick="countCheckboxes()" /> B<br />
          <input type="checkbox" name="items[]" value="c15" onclick="countCheckboxes()" /> C<br />
          <input type="checkbox" name="items[]" value="d20" onclick="countCheckboxes()" /> D<br />
          <input type="checkbox" name="items[]" value="e30" onclick="countCheckboxes()" /> E<br />
          <input type="checkbox" name="items[]" value="f5" onclick="countCheckboxes()" /> F<br />
          <input type="checkbox" name="items[]" value="g20" onclick="countCheckboxes()" /> G<br />
          <span id="checkCount"></span>
        </form>
    	<div id="bar" style="width:0px; max-width:500px; height: 20px; background: #000;"></div><br/>
    	
    	<a href="javascript:void();" onclick="javascript:checkAll('testForm', true);">check all</a>
    	<a href="javascript:void();" onclick="javascript:checkAll('testForm', false);">uncheck all</a>
      </body>
    </html>

    They say there's no glory without practice. But without practice there's no glory. - Commentator ITV
    Last edited by Philip M; 07-09-2013 at 08:37 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Undisclosed (07-09-2013)

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    22
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thank you so much both. I will make great use of these.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,149
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    A better version:-

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function countCheckboxes ( ) {
    var p = [40,65,35,80,50,75,60];  // pixels associated with 7 checkboxes
    var cumnum = 0;
    var count = 0;
    var form = document.getElementById('myForm');
    for (var n=0; n < form.length; n++)  {
    if (form[n].name == 'items[]' && form[n].checked)  {
    count ++;
    cumnum += p[n];
    }
    }
    document.getElementById('chBoxCount').innerHTML = count;
    document.getElementById('bar').style.width = cumnum + "px";
    }
         
    function checkAll(formid, checktoggle)  {
    var checkboxes = [];
    checkboxes = document.getElementById(formid).getElementsByTagName('input');
    for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
    checkboxes[i].checked = checktoggle;
    }
    }
    countCheckboxes();
    }
    
    </script>
    
    </head>
    <body>
    
    <form id="myForm">
    <input type="checkbox" name="items[]" value="a" onclick="countCheckboxes()" /> A<br />
    <input type="checkbox" name="items[]" value="b" onclick="countCheckboxes()" /> B<br />
    <input type="checkbox" name="items[]" value="c" onclick="countCheckboxes()" /> C<br />
    <input type="checkbox" name="items[]" value="d" onclick="countCheckboxes()" /> D<br />
    <input type="checkbox" name="items[]" value="e" onclick="countCheckboxes()" /> E<br />
    <input type="checkbox" name="items[]" value="f" onclick="countCheckboxes()" /> F<br />
    <input type="checkbox" name="items[]" value="g" onclick="countCheckboxes()" /> G<br />
    Total number of boxes checked:- <span id="chBoxCount">0</span>
    </form>
    <div id="bar" style="width:0px; max-width:500px; height: 20px; background: #000;"></div>
    <br>
    
    <input type = "button" value = "Check All" onclick ="checkAll('myForm', true);">
    <input type = "button" value = "Uncheck All" onclick ="checkAll('myForm', false);">
    
    </body>
    </html>
    Last edited by Philip M; 07-09-2013 at 03:44 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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