进度条的行为取决于复选框bootstrap + jquery

Progressbar behavior depending on checkboxes bootstrap + jquery

本文关键字：复选框 bootstrap jquery 取决于更新时间：2023-09-26

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

预期行为
-如果用户检查问题(完成后)，进度条指示器以一定值增加，
-但如果未选中，进度条指示器应该以相同的值

减小当前行为

每次单击复选框(选中或未选中)，进度条都会增加。
这只在false和true倒转时有效，否则什么也不会发生

下面的代码，我做错了。

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

PLNKR DEMO

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

预览<<p> 堆栈片段/strong>
<!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>
修改后的代码:
对于input
使用 .is(":checked")。您正在检查包装器类。在输入时更改点击事件为
改变
$("#s11id").click(function(){ if ($("#s11id").is(":checked") == true) {
$("#s11id input").on('change', function(){ if ($("#s11id input").is(":checked") == true) {
用正确的
替换无效的html

改变

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

<div class="checkbox" id="s11id">
  <label>1.
    <input type="checkbox" value="">
  </label>
</div>

单击未在复选框输入上触发的事件。我不认为HTML中有class标签。Class是一个属性。

更新你的代码。

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

OnClick事件是否触发复选框输入并查找复选框是否被选中。根据复选框选中的值增加和法令进度值。

JS:

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:

<input type="checkbox" value="" id="s11id" onClick="progressBar(this)">

演示:

http://plnkr.co/edit/tGe70t90Y5EyvlgvjaVX?p =预览