<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Data Attribute
</h3>
</div>
<div class="panel-body">
<p>Choose songs - <strong>maximum 10 minutes</strong>.</p>
<p>Total length: <span id="minutes">0</span> mins <span id="seconds">0</span> seconds.</p>
<form>
Song 1: <input type="checkbox" data-duration="126" name="song1" onclick="updateDuration(this)"/><br/>
Song 2: <input type="checkbox" data-duration="200" name="song2" onclick="updateDuration(this)"/><br/>
Song 3: <input type="checkbox" data-duration="185" name="song3" onclick="updateDuration(this)"/><br/>
Song 4: <input type="checkbox" data-duration="129" name="song4" onclick="updateDuration(this)"/><br/>
Song 5: <input type="checkbox" data-duration="122" name="song5" onclick="updateDuration(this)"/>
</form>
</div>
</div>
Read more: http://www.webdesign.org/html5-and-javascript-custom-data-attributes.22312.html#ixzz2uja9WhXd
</div>
</div>
</div>
</body>
</html>
function updateDuration(elem)
{
var minElem=document.getElementById("minutes");
var secElem=document.getElementById("seconds");
//parseInt(elem.getAttribute("data-duration"));
var currMins=parseInt(minElem.innerHTML);
var currSecs=parseInt(secElem.innerHTML);
var newLen=parseInt(elem.dataset.duration);
var mins=Math.floor(newLen/60);
var secs=newLen%60;
var newTotal=0;
if(elem.checked)
{
minElem.innerHTML=currMins+mins;
secElem.innerHTML=currSecs+secs;
newTotal=(currMins*60)+currSecs+newLen;
}
else
{
minElem.innerHTML=currMins-mins;
secElem.innerHTML=currSecs-secs;
newTotal=(currMins*60)+currSecs-newLen;
}
if (newTotal>600) {minElem.style.color="#ff0000"; secElem.style.color="#ff0000";}
else {minElem.style.color="#000000"; secElem.style.color="#000000";}
}
