Checkbox Cookie & Progress Bar Connection

First off, I apologise for being totally deft at Javascript. I've pieced together 2 scripts (among others - thank you developers!) for remembering checkboxes that have been checked off via a cookie, and then added a progress bar that changes also based off the check boxes.

Being as unknowledgeable as I am, I assumed that the cookie's data repopulation would also trigger the progress bar-which it doesn't. Since the progress bar is triggered by 'on.click', I can understand why it does not automatically register the repopulated cookie data- but I don't know how to proceed from there to connect the two. I really only know html and css. I'm guessing there should be some intermediary function that also triggers the progress bar?

This is for a semester long grad school project. If anyone could offer some advice, my appreciation and gratitude are yours! I apologise for the code perhaps not looking so great in the snippet - the item in question is currently hosted here under 'tasks':

http://ift.tt/1LzMIBn

//Creates the cookie that remembers the checkboxes
<script>
      $(":checkbox").on("change", function(){
        var checkboxValues7 = {};
        $(":checkbox").each(function(){
          checkboxValues7[this.id] = this.checked;
        });
        $.cookie('checkboxValues7', checkboxValues7, { expires: 7, path: '/' })
      });

      function repopulateCheckboxes(){
        var checkboxValues7 = $.cookie('checkboxValues7');
        if(checkboxValues7){
          Object.keys(checkboxValues7).forEach(function(element) {
            var checked = checkboxValues7[element];
            $("#" + element).prop('checked', checked);
          });
        }
      }

      $.cookie.json = true;
      repopulateCheckboxes();
   </script>
 //This is the progress bar input script //
   
   <script>
        $('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});
        </script>

span.bigchecktarget {
    font-family: fontawesome; /* use an icon font for the checkbox */  
}
input[type='checkbox'].bigcheck {     
    position: relative;
    left: -999em; /* hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigchecktarget:after {
    content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
    color: #197FD4;
    font-size: 1.5em; 
}
input[type='checkbox'].bigcheck:checked + span.bigchecktarget:after {
    content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
        color: #FF4D4D;
}

li.taskcheck ul li{
        padding-right: 15px;
        font-size: .9em;
}
.progress{
        background-color: #EAEAEA;
        height: 50px;
        border: 1px solid transparent;
        border-radius: 8px;
        width: 75%;
        margin: auto;

}
.progress-bar{
        height: 50px;
        border-radius: 8px;

        } 
        
.progress-bar-success{
        background-color:  #50CA8E;
        width: 0;
}

<ul>
  <script src="http://ift.tt/1raaURo"></script>
        <li class="taskcheck">
                <label class="bigcheck" for="option1">
                  <span class="blue">Module 1: Assignment 1</span> 
                </label>
        <input class="bigcheck" type="checkbox" id="option1" name="option1" value="20">
        <span class="bigchecktarget"></span>
        <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
        </ul>
        <div class="progress">
                 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>