<label>
<input class="checkbox" type="checkbox" value="10">
one
</label>
<label>
<input class="checkbox" type="checkbox" value="5">
two
</label>
<label>
<input class="checkbox" type="checkbox" value="2.7">
three
</label>
<span class="price"></span>
label {
display: block;
}
$('.checkbox').on('change', function() {
var prices = $('.checkbox:checked').map(function () {
return parseFloat(this.value)
}).get()
if (prices.length) {
$('.price').text(
Math.min.apply(null, prices) +
' - ' +
Math.max.apply(null, prices)
)
} else {
$('.price').text('')
}
})
This Pen doesn't use any external CSS resources.