At the moment I have a check list that updates the progress bar once a check-box is clicked, however, I want the progress bar to update according to whatever the percentage is on the check-box. I have spent hours looking for a solution and trying different things but have had no luck. Any help or advice?
DEMO= http://jsfiddle.net/UznQe/
<!DOCTYPE html>
<html>
<head>
<title>Bars for checklist</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="themes/theme1.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />
<script src="jqm/demos/js/jquery.js">
</script>
<script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).on('pagebeforeshow', '#checklist', function () {
$('input[type="checkbox"]').each(function () {
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
var total = $("#theList input[type=checkbox]").length;
var numChecked = $("#theList input[type=checkbox]:checked").length;
if (numChecked == 1) {
$("#progress").css('background', 'red');
} else if (numChecked == 2) {
$("#progress").css('background', 'orange');
} else if (numChecked == 3) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
var prog = numChecked * 100 / total;
$("#progress").css("width", prog + "%");
});
</script>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Task list</h1>
<div data-role="content">
<ul data-role="listview" id="theList" data-inset="true">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
<a href="" class="detailListText">Task 1 (15%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
</div>
<a href="" class="detailListText">Task 2 (40%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
</div>
<a href="" class="detailListText">Task 3 (5%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
</div>
<a href="" class="detailListText">Task 4 (10%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
</div>
<a href="" class="detailListText">Task 5 (15%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
<a href="" class="detailListText">Task 6 (15%)</a>
</li>
</ul>
</div>
</div>
<div class="meter green nostripes">
<span id="progress" style="width: 0%"></span>
</div>
</div>
<style>
.detailListText{
margin: 0 0 0 20px;
}
.checkBoxLeft{
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.hidden-checkbox {
display: none;
}
.not-checked {
background-position: 18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;
background-color:#6496bc;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
</style>
</div>
</body>
</html>
Updated FIDDLE
Instead of counting the number of checked checkboxes, you add up the values of the checked checkboxes:
//calculate percentage
perc = 0;
$("#theList input[type=checkbox]:checked").each(function( index ) {
perc += parseInt($(this).val());
});
if (perc < 15) {
$("#progress").css('background', 'red');
} else if (perc < 30) {
$("#progress").css('background', 'orange');
} else if (perc < 60) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
$("#progress").css("width", perc + "%");
parseInt($(this).val()) gives you an integer representation of the value.