チェックボックスの値を使用して進行状況バーを追跡する方法

Question

チェックボックスの値を使用して進捗セクションを追跡したいと思います。だから、どのように動作するのは簡単です。 1ページと2ページの2ページがあります。 1ページにはいくつかのチェックボックスがあり、2ページには1つのプログレスバーがあります。ユーザーがページ1のチェックボックスをクリックすると、別のページからプログレスバーの値を大きくする必要があります。しかし、私は2ページでこれを行う方法を知らない。私は1ページだけで試しました。ここ

jQuery(document).ready(function() { 
 
    jQuery('.progressbar_chkbox').on('click', function() { 
 
    var currValue = 0; 
 

 
    jQuery(".progressbar_chkbox:checked").each(function() { 
 
\t 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とexemple：ここではコードです。 https://jsfiddle.net/3kg17kg8/2/

$(function() { 
 

 
    $('.progressbar_chkbox').click(function() { 
 
    
 
    \t // Page 1 
 
    \t var progress = $(this).data('progress'); 
 
    
 
\t sessionStorage.setItem("progress", progress) 
 
    
 
     
 
     // Page 2 
 
    \t 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>