Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用复选框值

1 个答案: