首页
前端开发
选中复选框时动态更改引导程序进度条值

选中复选框时动态更改引导程序进度条值 [英] Dynamically change bootstrap progress bar value when checkboxes checked

查看：19 发布时间：2021/12/7 22:38:04 javascript jquery twitter-bootstrap twitter-bootstrap-3 progress-bar

本文介绍了选中复选框时动态更改引导程序进度条值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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


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

<div class="行任务"><div class="col-md-6"><p><span><?php echo $title;?></span><?php echo $description;?></p>

<div class="col-md-2"><label><?php echo $date;?></label>

<div class="col-md-2"><input type="checkbox" name="progress" class="progress" value="<?php echo $progress; ?>">

<div class="col-md-2"><input type="checkbox" name="done" class="done" value="<?php echo $done; ?>">

</div>

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

这是我的 javascript 代码

$(document).ready(function() {$('.progress').change(function(event) {var progress_value = $(this).val();var newval = progress_value;如果 ($(this).is(':checked')) {$('.progress-bar').css("width", function(i) {而(新值<100){return newval+"%";newval+=progress_value;}});} 别的 {$('.progress-bar').css("width", function(i) {做 {newval -= progress_value;return newval+"%";} while(newval >= progress_value);});}});});

解决方案

试试这个:

Bootply:http://www.bootply.com/106527

Js :

$('input').on('click', function(){无功价值 = 0;$('input:checked').each(function(){如果 ( $(this).attr('value') > valeur ){价值 = $(this).attr('value');}});$('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);});

HTML:

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

<div class="行任务"><div class="col-md-6"><p><span>确定您的广告系列受众.</span>我们在这里与谁交谈?在启动广告系列之前了解您的买家角色，以便您可以正确定位他们.</p>

<div class="col-md-2"><label>2014-01-29</label>

<div class="col-md-2"><input name="progress" class="progress" type="checkbox" value="10">

<div class="col-md-2"><input name="done" class="done" type="checkbox" value="20">

</div><div class="行任务"><div class="col-md-6"><p><span>设定您的目标 + 基准</span>拥有 SMART 目标可以帮助您成为确保您将有切实的成果与世界(或您的boss)在您的竞选活动结束时.</p>

<div class="col-md-2"><label>2014-01-25</label>

<div class="col-md-2"><input name="progress" class="progress" type="checkbox" value="30">

<div class="col-md-2"><input name="done" class="done" type="checkbox" value="40">

</div>

CSS

.tasks{背景色:#F6F8F8；填充:10px；边框半径:5px；边距顶部:10px；}.tasks 跨度{字体粗细:粗体；}.tasks 输入{显示:块；边距:0 自动；边距顶部:10px；}.tasks a{颜色:#000；文字装饰:无；边界:无；}.tasks a:hover{边框底部:虚线 1px #0088cc;}.tasks 标签{显示:块；文本对齐:居中；}

$(function(){$('输入').on('点击', function(){无功价值 = 0;$('input:checked').each(function(){如果 ( $(this).attr('value') > valeur ){价值 = $(this).attr('value');}});$('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);});});

.tasks{背景色:#F6F8F8；填充:10px；边框半径:5px；边距顶部:10px；}.tasks 跨度{字体粗细:粗体；}.tasks 输入{显示:块；边距:0 自动；边距顶部:10px；}.tasks a{颜色:#000；文字装饰:无；边界:无；}.tasks a:hover{边框底部:虚线 1px #0088cc;}.tasks 标签{显示:块；文本对齐:居中；}

<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 class="col-md-2"><label>2014-01-29</label>

<div class="col-md-2"><input name="progress" class="progress" type="checkbox" value="10">

<div class="col-md-2"><input name="done" class="done" type="checkbox" value="20">

<div class="col-md-2"><label>2014-01-25</label>

<div class="col-md-2"><input name="progress" class="progress" type="checkbox" value="30">

<div class="col-md-2"><input name="done" class="done" type="checkbox" value="40">

</div>

I'm trying to make a dynamic checklist with bootstrap progress bar. Here's my markup code

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

What I want to do is when I check on the first checkbox the progressbar value is changed to the checkbox value, and when I check the second one, progressbar value must increment by the second checkbox value and so on

Here's my javascript code

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

解决方案

Try this maybe :

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

这篇关于选中复选框时动态更改引导程序进度条值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

选中复选框时动态更改引导程序进度条值 [英] Dynamically change bootstrap progress bar value when checkboxes checked

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

选中复选框时动态更改引导程序进度条值 [英] Dynamically change bootstrap progress bar value when checkboxes checked

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭