选中复选框时为JavaScript变量添加值

Add value to JavaScript variable when checkbox is checked

本文关键字：变量 添加 JavaScript 复选框      更新时间：2023-09-26

这是一个简单的应用程序，用于计算计算机硬件所选元素的总价。它应该与innerHTML一起工作，并对其进行日常更改。

问题是，对于我的代码，什么都不会发生，所以你可以在我的小提琴上检查它，或者只看下面的代码。它应该改变最后一个盒子里的价格？？？

小提琴

代码：

<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">&#10003;</td>      
  </tr>
<tr>
<tr>
  <td>Motherboard</td>
  <td align="center">&#10003;</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 + " &euro;";

存在一些问题

  • 您需要在check内部调用document.getElementById('total').innerHTML = price;，以便在单击复选框时更新
  • 不能有多个项目具有相同的ID。我将它们更改为ID_1、ID_2、ID_3
  • 您需要添加到add变量中的现有值
  • 你必须为所有的复选框勾选零钱，而不仅仅是第一个

将代码更改为以下内容http://jsfiddle.net/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 + " &euro;"; 
  document.getElementById('total').innerHTML = price;  
 }
check();

对于更干净的代码，您可以使用以下http://jsfiddle.net/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 + " &euro;"; 
    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);

在check函数中添加计算，或者在添加数字后进行计算：

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 + " &euro;"; 
    document.getElementById('total').innerHTML = price;
}

这意味着在加载页面时，代码不会只运行一次。

相关文章：