Price Select

by Jayson Buquia

HTML

<div class="list">
    <label for="p60">
        <input type="checkbox" id="p60"/>
        <span class="price">60</span>
    </label>
    <label for="p50">
        <input type="checkbox" id="p50"/>
        <span class="price">50</span>
    </label>
    <label for="p30">
        <input type="checkbox" id="p30"/>
        <span class="price">30</span>
    </label>
</div>
<div id="total">
    0
</div>

CSS

input[type=checkbox]
{
    display: none;
}
input:checked + .price {
    background: gray;
    color : white;
}
label {
    display: block;
}
.price {
    width : 60px;
    height: 60px;
    display: inline-block;
    background: silver;
    margin: 5px;
}

JavaScript

var par = document.querySelectorAll('.list')[0],
		    children = par.children,
		    c = [],
		    sum = 0;

		for ( i=0; i < children.length; i++ )
		{
		    c.push(children[i]);
		}

		function updateTotal(e,b)
		{
			var val = Number(e.id.replace('p',''));

				sum += b ? val : -(val);
		    
		 		document.getElementById('total').innerHTML = sum;		   
		    
		}		

		c.forEach(function(x){	    
		    
		    var cb = x.children[0],
		    	span = x.children[1];

		   span.onclick = function(e){

		    	e.preventDefault();

		    	cb.checked = !cb.checked;


		        updateTotal(cb,cb.checked);			          
		    
		    }	    
		   
		})