まずはindex.htmlにチェックリストを作ります。今回はitem三つで。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progress Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="items">
<label><input type="checkbox">読書をする</label><br>
<label><input type="checkbox">英語をする</label><br>
<label><input type="checkbox">プログラミングをする</label><br>
</div>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="progressbar.js"></script>
</body>
</html>
定型文などは省略……しようと思いましたが、分かりづらくなるとあれなんで、一応全部書いておきました。
次に、checkboxが押されるたびにProgress Barが増えるようにします。
progressbar.js
$(function() {
var $pb = $('.progress-bar');
$("#items :checkbox").click(function() {
if($("#items :checked").length == 1) {
$pb.attr({
'style':'width:33%;',
'class':'progress-bar'
}).html(" 33% ");
} else if($("#items :checked").length == 2) {
$pb.attr({
'style':'width:66%;',
'class':'progress-bar'
}).html(" 66% ");
} else if($("#items :checked").length == 3) {
$pb.attr({
'style':'width:100%;',
'class':'progress-bar progress-bar-striped active'
}).html(" 100% ");
} else {
$pb.attr({
'style':'width:0%;',
'class':'progress-bar'
}).html(" 0% ");
}
});
ここではid="items"にcheckboxのフィルターをかけて、checkboxが押されてcheckedの状態になるたびに1/3ずつ増やすように記述しました。ここの記述をアレンジすれば、数が増えてもその分の割合だけprogress barが増加するようにもできます。
ひとまずこれで完成。
二つクリックした場合。
三つクリックした場合。
うん、いけてる。
これで終わるのもいいんですが、二つのprogress barを並べて、それぞれ別の目標を掲げる感じのものも作ってみたんであげときます。
index.html
<!-- 略 -->
<!-- 先ほどのindex.htmlに二つ目のprogress barを作る -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="items2">
<label><input type="checkbox">課題をする</label><br>
<label><input type="checkbox">料理をする</label><br>
<label><input type="checkbox">やる気出す</label><br>
</div>
<!-- 略 -->
idをこっちはitem2にしています。itemのままだと、先ほどと同じclassを使用しているため、どちらのitemを押してもbarが増える感じになっちゃいます。
最後に、progress barの改良版を載せます。
progressbar.js
$(function() {
var $pb = $('.progress-bar:first');
var $pb2 = $('.progress-bar:last');
$("#items :checkbox").click(function() {
if($("#items :checked").length == 1) {
$pb.attr({
'style':'width:33%;',
'class':'progress-bar'
}).html(" 33% ");
} else if($("#items :checked").length == 2) {
$pb.attr({
'style':'width:66%;',
'class':'progress-bar'
}).html(" 66% ");
} else if($("#items :checked").length == 3) {
$pb.attr({
'style':'width:100%;',
'class':'progress-bar progress-bar-striped active'
}).html(" 100% ");
} else {
$pb.attr({
'style':'width:0%;',
'class':'progress-bar'
}).html(" 0% ");
}
});
$("#items2 :checkbox").click(function() {
if($("#items2 :checked").length == 1) {
$pb2.attr({
'style':'width:33%;',
'class':'progress-bar'
}).html(" 33% ");
} else if($("#items2 :checked").length == 2) {
$pb2.attr({
'style':'width:66%;',
'class':'progress-bar'
}).html(" 66% ");
} else if($("#items2 :checked").length == 3) {
$pb2.attr({
'style':'width:100%;',
'class':'progress-bar progress-bar-striped active'
}).html(" 100% ");
} else {
$pb2.attr({
'style':'width:0%;',
'class':'progress-bar'
}).html(" 0% ");
}
});
});
ここでのポイントは初めのDOM操作です。二つのclassのprogress-barを:firstと:lastで区別しています。
うん、うまくいってる。