Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
Javascript: Dynamic Checkboxes?
I know this is a big ask, but if anyone could at least point me in the right direction. I've got 6 checkboxes named chk1, chk2, chk3, chk4, chk5, chk6, chk7. For each of these when checked, I need to update a textfield called totalprice, by adding $100 for each check. Help appreciated.
Ideally I would like total price to be updated immediately so it be seen by the user.
3 Answers
- Empire539Lv 71 decade agoFavorite Answer
I actually count seven checkboxes. Either way, it should work.
<script type="text/javascript">
<!--
var total = 0;
function priceUpdate(tog)
{
var tCheck = tog.checked;
if (tCheck)
{
total += 100
}
else
{
total -= 100
}
tPrice = document.getElementById('totalprice');
tPrice.innerHTML = total;
}
-->
</script>
<input type="checkbox" id="chk1" onClick="priceUpdate(this)"/>Check1<br>
<input type="checkbox" id="chk2" onClick="priceUpdate(this)"/>Check2<br>
<input type="checkbox" id="chk3" onClick="priceUpdate(this)"/>Check3<br>
<input type="checkbox" id="chk4" onClick="priceUpdate(this)"/>Check4<br>
<input type="checkbox" id="chk5" onClick="priceUpdate(this)"/>Check5<br>
<input type="checkbox" id="chk6" onClick="priceUpdate(this)"/>Check6<br>
<input type="checkbox" id="chk7" onClick="priceUpdate(this)"/>Check7<br>
<b>Total: </b>$<span id="totalprice">0</span>
Edit: Ahh flybishop... looks like you beat me to it. Great minds think alike!
- 1 decade ago
<input type="checkbox" id="chk1" onchange="add();" />
Then in the Javascript function add() you can have it add $100 if document.getElementById('chk1').checked == true and subtract $100 otherwise.
- flybishopLv 51 decade ago
It's easier than you think. Try this:
<html>
<head>
<script type="text/javascript">
var total = 0;
function addmoney(elem)
{
if(elem.checked == true) {
total += 100;
} else {
total -= 100;
}
totdiv = document.getElementById('total');
totdiv.innerHTML = total;
}
</script>
</head>
<body>
<input type="checkbox" onchange="addmoney(this);" id="chk1" name="chk1"/><br/>
<input type="checkbox" onchange="addmoney(this);" id="chk2" name="chk2"/><br/>
<input type="checkbox" onchange="addmoney(this);" id="chk3" name="chk3"/><br/>
<input type="checkbox" onchange="addmoney(this);" id="chk4" name="chk4"/><br/>
<input type="checkbox" onchange="addmoney(this);" id="chk5" name="chk5"/><br/>
<input type="checkbox" onchange="addmoney(this);" id="chk6" name="chk6"/><br/>
<input type="checkbox" onchange="addmoney(this);" id="chk7" name="chk7"/><br/>
<div id="total"></div>
</body>
</html>
This works for me in Firefox at least.
