Progress bar generated by checkboxes to appear in different pages

Question

guys! I apologise if this question repeats some other, but I couldn't find any solution and don't have much time to solve it.

My problem is that I have to make progress bar in wordpress based website. It must be generated by checkboxes which are situated on one page, but the progress bar is not on the same page. It would appear on many more pages. The progress bar code is in a template.php and in the pages (where I want it to shows) I use get_template_part() . The jQuery code is in its own .js file. The code below works fine if it's in one page, but I need it to work everywhere in the site. I also have to save this functionality not only for the current session, but to save it permanently and only update it if there is new checked checkboxes.

If anyone have solution for this code or have better suggestion to make it other way, I would be really thankful to. Sorry for the probably stupid questions but I'm still juniour. Thanks! :)

My basic code (based on bootstrap) is:

jQuery(document).ready(function(){

    //Progress bar generated by checkboxes
    var emptyValue = 0;

    $('input').on('click', function Progressbar() {
    emptyValue = 0;
    $('input.videoChecks:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow',emptyValue);
    });
    });


<!-- Begin checkboxes -->
    <div class="panelBody" id="panelBody1">

    <input id="input1" class="videoChecks" type="checkbox" name="completed1" value="20">
    <input id="input2" class="videoChecks" type="checkbox" name="completed2" value="20">
    <input id="input3" class="videoChecks" type="checkbox" name="completed3" value="20">
    <input id="input4" class="videoChecks" type="checkbox" name="completed4" value="20">
    <input id="input5" class="videoChecks" type="checkbox" name="completed5" value="20">

    </div>

    <!-- Begin progress bar -->
    <div class="progress" >
    <div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    </div>
    </div>

Answer 1

I'll give you something to start off with. Run the code snippet below.

If you have the given javascript loaded on a page then all you'll have to do is to define a bunch of checkboxes with the class "progressbar_chkbox" and a progress bar element with the ID "progress-bar" and it will work.

This is not the best solution but something for you to start off with. You should consider turning it into a jQuery extension.

 jQuery(document).ready(function() { jQuery('.progressbar_chkbox').on('click', function() { var currValue = 0; jQuery(".progressbar_chkbox:checked").each(function() { currValue += parseInt($(this).val()); }); currValue = Math.min(currValue, 100); jQuery('#progress-bar').css('width', currValue + '%').attr('aria-valuenow', currValue); }); }); 

 .progress-bar { background: red; height: 100px; width: 0%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Begin checkboxes --> <div class="panelBody" id="panelBody1"> <input id="input1" class="progressbar_chkbox videoChecks" type="checkbox" name="completed1" value="20"> <input id="input2" class="progressbar_chkbox videoChecks" type="checkbox" name="completed2" value="20"> <input id="input3" class="progressbar_chkbox videoChecks" type="checkbox" name="completed3" value="20"> <input id="input4" class="progressbar_chkbox videoChecks" type="checkbox" name="completed4" value="20"> <input id="input5" class="progressbar_chkbox videoChecks" type="checkbox" name="completed5" value="20"> </div> <!-- Begin progress bar --> <div class="progress"> <div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> </div> </div>