Search code examples
javascriptjqueryhtmlcheckboxprogress

php / jquery progress bar working with input change (checkbox: check)

I tried to creating progress bar working with checkbox input, when I click 25% checkbox, progress bar filled 25%....same for 50%, 75% and 100% and its working. But when I uncheck, it brings value to zero. i want it to remain to the checked value, if 25% is checked and I uncheck 50% after checking so it should move to 25% instead of 0. here is my code (Sorry for putting complete file over here, I tried to put working code through jsfiddle but Im not well aware of using that):

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  var x=0;
  /* Just display progress bar at 1st*/
  $(function() {
    $( "#progressbar" ).progressbar({
      value: x
    });
  });

    // For 25% increase
  function update1(){
     var c1 = $('input[name="c1"]:checked').length > 0;
    if(c1){
    x=25;
    $( "#progressbar" ).progressbar({ value: x });
    }
     if(!c1){
    $( "#progressbar" ).progressbar({ value: x=0 });
    }
    }
    // For 50% increase
  function update2(){
     var c2 = $('input[name="c2"]:checked').length > 0;
    if(c2){
    x=50;
    $( "#progressbar" ).progressbar({ value: x });
    }
     if(!c2){
    $( "#progressbar" ).progressbar({ value: x=0 });
    }
    }// For 75% increase
  function update3(){
     var c3 = $('input[name="c3"]:checked').length > 0;
    if(c2){
    x=75;
    $( "#progressbar" ).progressbar({ value: x });
    }
     if(!c3){
    $( "#progressbar" ).progressbar({ value: x=0 });
    }
    }// For 100% increase
  function update4(){
     var c4 = $('input[name="c4"]:checked').length > 0;
    if(c2){
    x=100;
    $( "#progressbar" ).progressbar({ value: x });
    }
     if(!c4){
    $( "#progressbar" ).progressbar({ value: x=0 });
    }
    }
  </script>
</head>
<body>

<div id="progressbar"></div>
25% <input type="checkbox" name="c1" id="c1" onChange="update1();" /> 
&nbsp;
50% <input type="checkbox" name="c2" id="c2" onChange="update2();" /> 
&nbsp;
75% <input type="checkbox" name="c3" id="c3" onChange="update3();" />  
&nbsp;
100% <input type="checkbox" name="c4" id="c4" onChange="update4();" />  
</body>
</html>
Solution

  • I've found a solution this morning myself, a little changes have been made as follows, rest external sources will remain same.

    Whole Code:

    <div id="progressbar"></div>
25% <input type="checkbox" name="c1" id="c1" onChange="update();" /> 
&nbsp;
50% <input type="checkbox" name="c2" id="c2" onChange="update();" /> 
&nbsp;
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />  
&nbsp;
100% <input type="checkbox" name="c4" id="c4" onChange="update();" />

    Whole Script:

    var x=0;
  /* Just display progress bar at 1st*/
  $(function() {
    $( "#progressbar" ).progressbar({
      value: x
    });
  });

  function update(){
    // For 25% increase
     var c1 = $('input[name="c1"]:checked').length > 0;
    if(c1){
    $( "#progressbar" ).progressbar({ value: x=+25 });
    x+=25;
    }
     if(!c1){
    $( "#progressbar" ).progressbar({ value: x=-25 });
    }
    // For 50% increase
    var c2 = $('input[name="c2"]:checked').length > 0;
    if(c2){
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c2){
    $( "#progressbar" ).progressbar({ value: x-25 });
    }
    // For 75% increase
    var c3 = $('input[name="c3"]:checked').length > 0;
    if(c3){
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c3){
    $( "#progressbar" ).progressbar({ value: x-25 });
    }
    // For 100% increase
    var c4 = $('input[name="c4"]:checked').length > 0;
    if(c4){
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c4){
    $( "#progressbar" ).progressbar({ value: x-25 });
    }
  }