如何使用复选框值制作跟踪进度条

Question

我想使用复选框值跟踪您的进度部分。所以，它的工作原理很简单。看到有两页第一页和第二页。第一页有一些复选框，第二页有一个进度条。当用户单击第一页的复选框时，它应该增加另一页的进度条的值。但我不知道如何用两页来做到这一点。我只尝试了一页。代码如下：

   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);   
     });
      });

     <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>

      
        <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

这里是 localStorage 的一个例子。 https://jsfiddle.net/3kg17kg8/2/

$(function() {

  $('.progressbar_chkbox').click(function() {
  
  	// Page 1
  	var progress = $(this).data('progress');
    
	sessionStorage.setItem("progress", progress)
    
     
        // Page 2
   	var progress = sessionStorage.getItem("progress");
    
        $('#avancement').val(progress);
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <!-- Page 1 -->
    <input class="progressbar_chkbox" type="checkbox" data-progress="20">
    <input class="progressbar_chkbox" type="checkbox" data-progress="40">
    <input class="progressbar_chkbox" type="checkbox" data-progress="60">
    <input class="progressbar_chkbox" type="checkbox" data-progress="80">
      
     <!-- Page 2 -->
    <p><progress id="avancement" value="0" max="100"></progress></p>