我有一系列问题，每个问题都与一个复选框相关联，学生可以检查他/她的进度。
期望的行为
- 如果用户检查问题(已完成)，进度条指示器会增加一定的值，
- 但如果未选中，进度条指示器应以相同的值减少
当前行为
每次我单击复选框(选中或未选中)时，进度条都会增加。
并且只有当 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 演示
http://plnkr.co/edit/7F3rdRwAAncyqXNeUfCV?p=preview
堆栈片段
<!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>对代码所做的更改:
- 使用
.is(":checked")作为输入。您正在检查它的包装类。还将点击事件更改为输入的更改事件。
已更改
$("#s11id").click(function(){
if ($("#s11id").is(":checked") == true) {
至
$("#s11id input").on('change', function(){
if ($("#s11id input").is(":checked") == true) {
已更改
<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>
关于javascript - 进度条行为取决于复选框 bootstrap + jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40210465/