文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Progressbar行为取决于复选框引导+ jquery

问Progressbar行为取决于复选框引导+ jquery
EN

Stack Overflow用户
提问于 2016-10-24 03:55:48
回答 3查看 826关注 0票数 0

我有一系列的问题，每个相关的复选框，学生可以检查他/她的进展。

期望行为

  • 如果用户检查问题(正如所做的那样)进度条指示符随着某个值的增加，
  • 但是，如果不选中，进度条指示符应该以相同的值减少。

电流行为

每次单击复选框(选中或未选中)，进度条都会增加。

只有当假和真被反转时，这才有效，否则什么都不会发生。

按照代码，我做错了一些事情。

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    var progress = 0;

    $("#section1id").click(function(){
        $("#section1").toggle();
    });
    $("#section2id").click(function(){
        $("#section2").toggle();
    });

    $("#s11id").click(function(){
        if ($("#s11id").is(":checked") == false) {
        progress = progress+5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
        else if ($("#s11id").is(":checked") == true) {
        progress = progress-5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
    });
    $("#s21id").click(function(){
        if ($("#s12id").is(":checked") == false) {
        progress = progress+5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
        else if ($("#s12id").is(":checked") == true) {
        progress = progress-5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
});


});
</script>
  </head>


<body>

              <div class="checkbox">
                <label>
                  <input type="checkbox" class="section1-checkbox" id="section1id">Section1</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" class="section2-checkbox" id="section2id">Section2</label>
              </div>


<div class="container">
  <hr>
  <div class="progress" id="blips">
    <div class="progress-bar" role="progressbar">
      <span class="sr-only"></span>
    </div>
  </div>
  
  <button class="btn btn-default">Stop</button>
</div>

<div class="panel panel-primary" id="section1">
              <div class="panel-heading">
                <h3 class="panel-title">Section1</h3>
              </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <class="checkbox" id="s11id">
                      <label>1.
                        <input type="checkbox" value="">
                      </label>
                    </class="checkbox">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#section11">

Question1-s1

              </a>
                    </h4>
                  </div>
                  <div id="section11" class="panel-collapse collapse">
                    <div class="panel-body">Answer-s1</div>
                  </div>
                </div>
              </div>
            </div>


<div class="panel panel-primary" id="section2">
              <div class="panel-heading">
                <h3 class="panel-title">Section2</h3>
              </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <class="checkbox" id="s21id">
                      <label>1.
                        <input type="checkbox" value="">
                      </label>
                    </class="checkbox">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#section21">

Question1-s2

              </a>
                    </h4>
                  </div>
                  <div id="section21" class="panel-collapse collapse">
                    <div class="panel-body">Answer-s2</div>
                  </div>
                </div>
              </div>
            </div>





</body>
</html>

​

javascript
jquery
html
twitter-bootstrap
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-10-24 04:34:36

PLNKR演示

http://plnkr.co/edit/7F3rdRwAAncyqXNeUfCV?p=preview

堆栈片段

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($){
    var progress = 0;

    $("#section1id").click(function(){
        $("#section1").toggle();
    });
    $("#section2id").click(function(){
        $("#section2").toggle();
    });

    $("#s11id input").on('change', function(){
        if ($("#s11id input").is(":checked") == true) {
        progress = progress+5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
        else if ($("#s11id input").is(":checked") == false) {
        progress = progress-5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
    });
    $("#s21id input").on('change', function(){
        if ($("#s21id input").is(":checked") == true) {
        progress = progress+5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
        else if ($("#s21id input").is(":checked") == false) {
        progress = progress-5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
    });


});
</script>
  </head>


<body>

              <div class="checkbox">
                <label>
                  <input type="checkbox" class="section1-checkbox" id="section1id">Section1</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" class="section2-checkbox" id="section2id">Section2</label>
              </div>


<div class="container">
  <hr>
  <div class="progress" id="blips">
    <div class="progress-bar" role="progressbar">
      <span class="sr-only"></span>
    </div>
  </div>
  
  <button class="btn btn-default">Stop</button>
</div>

<div class="panel panel-primary" id="section1">
              <div class="panel-heading">
                <h3 class="panel-title">Section1</h3>
              </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <div class="checkbox" id="s11id">
                      <label>1.
                        <input type="checkbox" value="">
                      </label>
                    </div>
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#section11">

Question1-s1

              </a>
                    </h4>
                  </div>
                  <div id="section11" class="panel-collapse collapse">
                    <div class="panel-body">Answer-s1</div>
                  </div>
                </div>
              </div>
            </div>


<div class="panel panel-primary" id="section2">
              <div class="panel-heading">
                <h3 class="panel-title">Section2</h3>
              </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <div class="checkbox" id="s21id">
                      <label>1.
                        <input type="checkbox" value="">
                      </label>
                    </div>
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#section21">

Question1-s2

              </a>
                    </h4>
                  </div>
                  <div id="section21" class="panel-collapse collapse">
                    <div class="panel-body">Answer-s2</div>
                  </div>
                </div>
              </div>
            </div>
</body>
</html>

​

对代码所做的更改：

  1. 用.is(":checked") 表示 input.你在检查包装类。此外，在用于输入的更改事件上，将单击事件更改为。

变化

代码语言：javascript
复制
$("#s11id").click(function(){
        if ($("#s11id").is(":checked") == true) {

至

代码语言：javascript
复制
$("#s11id input").on('change', function(){
        if ($("#s11id input").is(":checked") == true) {
  1. 将无效的html替换为正确的html

变化

代码语言：javascript
复制
<class="checkbox" id="s11id">
  <label>1.
    <input type="checkbox" value="">
  </label>
</class="checkbox">

至

代码语言：javascript
复制
<div class="checkbox" id="s11id">
  <label>1.
    <input type="checkbox" value="">
  </label>
</div>
票数 1
EN

Stack Overflow用户

发布于 2016-10-24 04:29:09

单击正在触发的事件，该事件不在复选框输入中。我不认为HTML中有类标记。类是一个属性。

更新了你的代码。

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    var progress = 0;

    $("#section1id").click(function(){
        $("#section1").toggle();
    });
    $("#section2id").click(function(){
        $("#section2").toggle();
    });

    $("#s11id").click(function(){
        if ($("#s11id").is(":checked") == false) {
        progress = progress-5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
        else if ($("#s11id").is(":checked") == true) {
        progress = progress+5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
    });
    $("#s21id").click(function(){
        if ($("#s12id").is(":checked") == false) {
        progress = progress-5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
        else if ($("#s12id").is(":checked") == true) {
        progress = progress+5;
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
        }
});


});
</script>
  </head>


<body>

              <div class="checkbox">
                <label>
                  <input type="checkbox" class="section1-checkbox" id="section1id">Section1</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" class="section2-checkbox" id="section2id">Section2</label>
              </div>


<div class="container">
  <hr>
  <div class="progress" id="blips">
    <div class="progress-bar" role="progressbar">
      <span class="sr-only"></span>
    </div>
  </div>

  <button class="btn btn-default">Stop</button>
</div>

<div class="panel panel-primary" id="section1">
              <div class="panel-heading">
                <h3 class="panel-title">Section1</h3>
              </div>
                <div class="panel panel-default">
                  <div class="panel-heading">

                      <label>1.
                        <input id="s11id" type="checkbox" value="">
                      </label>
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#section11">

Question1-s1

              </a>
                    </h4>
                  </div>
                  <div id="section11" class="panel-collapse collapse">
                    <div class="panel-body">Answer-s1</div>
                  </div>
                </div>
              </div>
            </div>


<div class="panel panel-primary" id="section2">
              <div class="panel-heading">
                <h3 class="panel-title">Section2</h3>
              </div>
                <div class="panel panel-default">
                  <div class="panel-heading">

                      <label>1.
                        <input id="s21id" type="checkbox" value="">
                      </label>

                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#section21">

Question1-s2

              </a>
                    </h4>
                  </div>
                  <div id="section21" class="panel-collapse collapse">
                    <div class="panel-body">Answer-s2</div>
                  </div>
                </div>
              </div>
            </div>





</body>
</html>

请试试这个https://jsfiddle.net/Le4yhmgs/

票数 1
EN

Stack Overflow用户

发布于 2016-10-24 05:04:58

OnClick事件正在触发，这是在复选框输入和查找复选框被选中或不选中。基于复选框，勾选值增加并判令进度值。

JS:

代码语言：javascript
复制
var progress= 0;
function progressBar(e){
if(e.checked){
progress+=5;
alert(progress);
$('#blips > .progress-bar').attr("style","width:" + progress + "%");
}
else
{
progress-=5;
        alert(progress);
        $('#blips > .progress-bar').attr("style","width:" + progress + "%");
}
}

HTML:

代码语言：javascript
复制
<input type="checkbox" value="" id="s11id" onClick="progressBar(this)">

演示：

http://plnkr.co/edit/tGe70t90Y5EyvlgvjaVX?p=preview

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40210465

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档