Javascript Progressbar行为取决于复选框引导+；jquery_Javascript_Jquery_Html_Twitter Bootstrap

Javascript Progressbar行为取决于复选框引导+；jquery

javascript jquery html twitter-bootstrap

Javascript Progressbar行为取决于复选框引导+；jquery,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我有一系列的问题，每个问题都有一个复选框，学生可以检查自己的进度期望的行为 -如果用户检查问题（已完成），进度条指示器将以特定值增加， -但如果未选中，进度条指示器应以相同的值减少当前行为每次单击复选框（选中或未选中），进度条都会增加。只有当假与真相反时，这才有效，否则什么也不会发生按照代码，我做错了一些事情 $（文档）.ready（函数（）{ var进程=0； $（“#section1id”）。单击（函数（）{ $（“第1节”）.toggle（）； }); $（“#section

我有一系列的问题，每个问题都有一个复选框，学生可以检查自己的进度

期望的行为
-如果用户检查问题（已完成），进度条指示器将以特定值增加，
-但如果未选中，进度条指示器应以相同的值减少

当前行为
每次单击复选框（选中或未选中），进度条都会增加。
只有当假与真相反时，这才有效，否则什么也不会发生

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


$（文档）.ready（函数（）{
var进程=0；
$（“#section1id”）。单击（函数（）{
$（“第1节”）.toggle（）；
});
$（“#section2id”）。单击（函数（）{
$（“#第2节”）.toggle（）；
});
$（“#s11id”）。单击（函数（）{
如果（$（“#s11id”）.是（“：checked”）==false）{
进度=进度+5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
如果（$（“#s11id”）为（“：选中”）==true，则为else{
进度=进度-5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
});
$（“#s21id”）。单击（函数（）{
如果（$（“#s12id”）.是（“：checked”）==false）{
进度=进度+5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
如果（$（“#s12id”）。为（“：选中”）==true，则为else{
进度=进度-5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
});
});
第一节
第2节

停止
第一节
1.
答案-s1
第2节
1.
答案-s2

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

更新了你的代码

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


$（文档）.ready（函数（）{
var进程=0；
$（“#section1id”）。单击（函数（）{
$（“第1节”）.toggle（）；
});
$（“#section2id”）。单击（函数（）{
$（“#第2节”）.toggle（）；
});
$（“#s11id”）。单击（函数（）{
如果（$（“#s11id”）.是（“：checked”）==false）{
进度=进度-5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
如果（$（“#s11id”）为（“：选中”）==true，则为else{
进度=进度+5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
});
$（“#s21id”）。单击（函数（）{
如果（$（“#s12id”）.是（“：checked”）==false）{
进度=进度-5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
如果（$（“#s12id”）。为（“：选中”）==true，则为else{
进度=进度+5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
});
});
第一节
第2节

停止
第一节
1.
答案-s1
第2节
1.
答案-s2

请尝试此

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

更新了你的代码

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


$（文档）.ready（函数（）{
var进程=0；
$（“#section1id”）。单击（函数（）{
$（“第1节”）.toggle（）；
});
$（“#section2id”）。单击（函数（）{
$（“#第2节”）.toggle（）；
});
$（“#s11id”）。单击（函数（）{
如果（$（“#s11id”）.是（“：checked”）==false）{
进度=进度-5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
如果（$（“#s11id”）为（“：选中”）==true，则为else{
进度=进度+5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
});
$（“#s21id”）。单击（函数（）{
如果（$（“#s12id”）.是（“：checked”）==false）{
进度=进度-5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
如果（$（“#s12id”）。为（“：选中”）==true，则为else{
进度=进度+5；
$（'#blips>.progress bar'）.attr（“样式”，“宽度：“+progress+”%”）；
}
});
});
<input type="checkbox" value="" id="s11id" onClick="progressBar(this)">