本文介绍了选中复选框时将值添加到JavaScript变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是一个简单的应用程序,用于计算选定的计算机硬件元素的总价。它应该与innerHTML一起工作,并动态更改它。
问题是,对于我的代码,什么都不会发生,所以您可以在我的小提琴上检查它,或者只需查看下面的代码。它应该更改最后一箱中的价格?
FIDDLE
编码:
<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;"> <tr style="background-color:#f0f0f0;"> <th style="width:200px;text-align:left;">Elements</th> <th align="center"></th> </tr> <tr style="border-bottom:1px solid #a3a3a3;"> <td>CPU unit</td> <td align="center">✓</td> </tr> <tr> <tr> <td>Motherboard</td> <td align="center">✓</td> </tr> <td>Graphic card</td> <td align="center"><input type="checkbox" id="id_1" value="25" onchange="check();"></td> </tr> <tr> <td>Memory chip</td> <td align="center"><input type="checkbox" name="" value="" onchange="check();></td> </tr> <tr> <td>Monitor</td> <td align="center"><input type="checkbox" name="" value="" onchange="check();></td> </tr> </table> <table style="width:220px;padding:1px;border:1px solid #f0f0f0;font-size:22px; font-weight:bold;"> <tr style="border-bottom:1px solid #a3a3a3;text-align:center;background-color:#80CCDC"> <td id="total"><script>document.getElementById('total').innerHTML = price;</script></td></tr><tr> </table>JavaScript
var basic = 300; var add = 0; function check() { if(document.getElementById("id_1").checked) { add = 120; } if(document.getElementById("id_1").checked) { add = 40; } if(document.getElementById("id_1").checked) { add = 90; } } var p = basic + add; var price = p + " €"; 推荐答案有几个问题
- 您需要调用document.getElementById('total').innerHTML = price;Insidecheck,这样当您单击复选框时它就会更新;
- 不能有多个ID相同的项目。我已将它们更改为id_1、id_2、id_3
- 您需要添加到add变量中的现有值
- 您必须连接所有复选框的更改,而不仅仅是第一个。
将代码更改为以下代码jsfiddle/mendesjuan/3ja4X/3/
function check() { var basic = 300; var add = 0; if(document.getElementById("id_1").checked) { add += 120; } if(document.getElementById("id_2").checked) { add += 40; } if(document.getElementById("id_3").checked) { add += 90; } var p = basic + add; var price = p + " €"; document.getElementById('total').innerHTML = price; } check();对于更简洁的代码,您可以使用以下jsfiddle/mendesjuan/3ja4X/4/
function updateTotal(){ var basic = 300; var add = 0; var form = document.getElementById('form'); // Store the value for each item in the checkbox so // you don't need to have three separate `if`s and IDs for them. var checkboxes = form.getElementsByClassName('addon'); for (var i=0; i < checkboxes.length; i ++) { if (checkboxes[i].checked) { add += parseInt(checkboxes[i].value, 10); } } var p = basic + add; var price = p + " €"; document.getElementById('total').innerHTML = price; } // Hookup handlers from JS, not in the HTML from a single // place using event delegation document.getElementById('form').addEventListener('change', updateTotal);更多推荐
选中复选框时将值添加到JavaScript变量
发布评论