|
Сообщение от AaronWolfsberg
|
|
Или как-то "закруглить"
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.sum + span{
background-color: #D3D3D3;
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-block;
border: 4px solid #8B4513;
}
.sum:checked + span {
background-color: #006400;
}
.sum{
display: none;
}
</style>
<script>
addEventListener( "DOMContentLoaded" , function() {
function showTotal()
{
var total = Array.prototype.reduce.call(document.querySelectorAll(".sum:checked"),
function(sum, elem) {
return sum + +elem.value
}, 0);
document.querySelector("output").innerHTML = total.toFixed(2)
}
document.querySelector("form").addEventListener("change", showTotal)
});
</script>
</head>
<body>
<form action="http://">
<label><input name="" type="checkbox" class="sum" value="2.5"><span class="checkmark"></span>спички 100шт.</label>
<label><input name="" type="checkbox" class="sum" value="100"><span class="checkmark"></span>гречка 1кг</label>
<label><input name="" type="checkbox" class="sum" value="333"><span class="checkmark"></span>сахар 1кг</label>
</form>
<output></output>
</body>
</html>