选中复选框时动态更改引导进度条值

Posted

技术标签:

【中文标题】选中复选框时动态更改引导进度条值【英文标题】：Dynamically change bootstrap progress bar value when checkboxes checked 【发布时间】：2014-02-06 13:21:44 【问题描述】：

我正在尝试使用引导进度条制作动态清单。这是我的标记代码

<div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<div class="row tasks">
    <div class="col-md-6">
        <p><span><?php echo $title; ?></span><?php echo $description; ?></p>
    </div>
    <div class="col-md-2">
        <label><?php echo $date; ?></label>
    </div>
    <div class="col-md-2">
        <input type="checkbox" name="progress" class="progress" value="<?php echo $progress; ?>">
    </div>
    <div class="col-md-2">
        <input type="checkbox" name="done" class="done" value="<?php echo $done; ?>">
    </div>
</div><!-- tasks -->

我想要做的是，当我选中第一个复选框时，进度条值更改为复选框值，当我选中第二个复选框时，进度条值必须增加第二个复选框值，依此类推

这是我的 javascript 代码

$(document).ready(function() 
  $('.progress').change(function(event) 
    var progress_value = $(this).val();
    var newval = progress_value;
    if ($(this).is(':checked')) 
      $('.progress-bar').css("width", function(i) 
        while(newval < 100) 
          return newval+"%";
          newval+=progress_value;
        
      );
     else 
      $('.progress-bar').css("width", function(i) 
        do 
          newval -= progress_value;
          return newval+"%";
         while(newval >= progress_value);
      );
    
  );
);

【问题讨论】：

【参考方案1】：

不妨试试这个：

引导层：http://www.bootply.com/106527

Js：

$('input').on('click', function()
  var valeur = 0;
  $('input:checked').each(function()
       if ( $(this).attr('value') > valeur )
       
           valeur =  $(this).attr('value');
       
  );
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);    
);

HTML：

 <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
<div class="row tasks">
        <div class="col-md-6">
          <p><span>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>
        </div>
        <div class="col-md-2">
          <label>2014-01-29</label>
        </div>
        <div class="col-md-2">
          <input name="progress" class="progress" type="checkbox" value="10">
        </div>
        <div class="col-md-2">
          <input name="done" class="done" type="checkbox" value="20">
        </div>
      </div><!-- tasks -->

<div class="row tasks">
        <div class="col-md-6">
          <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be
sure that you’ll have tangible results to share with the world (or your
boss) at the end of your campaign.</p>
        </div>
        <div class="col-md-2">
          <label>2014-01-25</label>
        </div>
        <div class="col-md-2">
          <input name="progress" class="progress" type="checkbox" value="30">
        </div>
        <div class="col-md-2">
          <input name="done" class="done" type="checkbox" value="40">
        </div>
      </div><!-- tasks -->

CSS

.tasks
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;

.tasks span
    font-weight: bold;

.tasks input
    display: block;
    margin: 0 auto;
    margin-top: 10px;

.tasks a
    color: #000;
    text-decoration: none;
    border:none;

.tasks a:hover
    border-bottom: dashed 1px #0088cc;

.tasks label
    display: block;
    text-align: center;



$(function()
$('input').on('click', function()
  var valeur = 0;
  $('input:checked').each(function()
       if ( $(this).attr('value') > valeur )
       
           valeur =  $(this).attr('value');
       
  );
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);    
);

);
.tasks
	background-color: #F6F8F8;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;

.tasks span
	font-weight: bold;

.tasks input
	display: block;
	margin: 0 auto;
	margin-top: 10px;

.tasks a
	color: #000;
	text-decoration: none;
	border:none;

.tasks a:hover
	border-bottom: dashed 1px #0088cc;

.tasks label
	display: block;
	text-align: center;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
<div class="row tasks">
        <div class="col-md-6">
          <p><span>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>
        </div>
        <div class="col-md-2">
          <label>2014-01-29</label>
        </div>
        <div class="col-md-2">
          <input name="progress" class="progress" type="checkbox" value="10">
        </div>
        <div class="col-md-2">
          <input name="done" class="done" type="checkbox" value="20">
        </div>
      </div><!-- tasks -->

<div class="row tasks">
        <div class="col-md-6">
          <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be
sure that you’ll have tangible results to share with the world (or your
boss) at the end of your campaign.</p>
        </div>
        <div class="col-md-2">
          <label>2014-01-25</label>
        </div>
        <div class="col-md-2">
          <input name="progress" class="progress" type="checkbox" value="30">
        </div>
        <div class="col-md-2">
          <input name="done" class="done" type="checkbox" value="40">
        </div>
      </div><!-- tasks -->

【讨论】：

您好，谢谢您的回复。顺便说一句，这适用于第一组复选框。但我正在使用循环来生成复选框组。而且我对生成的所有组使用相同的类“进度”和“完成”。选中其余复选框时，进度条不会更新。 你能提供两个复选框组的小提琴吗？ 对于每个输入，您必须设置要发送到导航栏的值：( input value="40" )... 看这里：bootply.com/106527 别忘了用 $(document).ready(function() .. ) 包装你的 JS，否则它可能不起作用！ 这对我有用：$('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur).html(valeur+'%');【参考方案2】：

Bootstrap 4 进度条

<div class="progress">
<div class="progress-bar" role="progressbar" style="" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Javascript

更改下一页/上一页操作的进度条

var count = Number(document.getElementById('count').innerHTML); //set this on page load in a hidden field after an ajax call
var total = document.getElementById('total').innerHTML; //set this on initial page load
var pcg = Math.floor(count/total*100);        
document.getElementsByClassName('progress-bar').item(0).setAttribute('aria-valuenow',pcg);
document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pcg)+'%');

【讨论】：

除非你使用 Bootstrap 本机（它没有 jQuery），否则没有理由用这样的裸 JS 代码惩罚自己。 JQuery 可能不再流行，但每个人都应该承认它更易读、更简洁。

以上是关于选中复选框时动态更改引导进度条值的主要内容，如果未能解决你的问题，请参考以下文章

选中复选框时如何打开引导模式（当勾选复选框时）

引导程序如何确定复选框/单选按钮的选中状态

当我选中/取消选中复选框时 Cookie 值更改

动态更改占位符文本

引导检查是不是选中复选框[重复]

更改输入时的蓝色外发光（复选框）（引导程序 4）