I'm developing a very important project where the user can change the values of "pressure" of two elements via checkboxes. These checkboxes has two different values, one for bar-one and the second for bar-two. All this system has a "status panel" that says if it's all ok, or if there's a problem.
Please note that I don't have to use echoes or alert messages, because I need to show different div's depending on the current status of both bars.
I did the best I can in the snippet, I'm new to JavaScript so please don't be mean with my errors.
var
even = $('.even'),
high = $('.high'),
low = $('.low');
$('input').on('click', function() {
var emptyValue = 0;
$('input:checked').each(function() {
emptyValue += parseInt($(this).val());
});
$('.bar-one').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});
if (average === 5) {
even.show();
} else {
even.hide();
}
if (average >= 7) {
high.show();
} else {
high.hide();
}
if (average <= 3) {
low.show();
} else {
low.hide();
}
.progress {
width: 100%;
height: 30px;
background-color: silver;
}
.bar-one {
background-color: blue;
}
.bar-two {
background-color: red;
}
<script src="http://ift.tt/1oMJErh"></script>
<div class="progress">
<div class="bar-one" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<br>
<div class="progress">
<div class="bar-two" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<br>
<div id="panel">
<input type="checkbox" value1="20" value2="5">
<input type="checkbox" value1="5" value2="20">
<input type="checkbox" value1="10" value2="10">
<input type="checkbox" value1="10" value2="-20">
<input type="checkbox" value1="-20" value2="10">
</div>
<div class="even">
Pressure is ok
</div>
<div class="high">
Pressure is high
</div>
<div class="low">
pressure is low
</div>
Your help is really appreciated!
