Question

我正在创建一个网站作为个人使用的小商店，我的主要问题是如何为所有这些的附加项编写函数？

六个单一复选框，适用于各种类型的外围设备，包括打印机，显示器，调制解调器或您熟悉的其他设备。假设基本计算机系统价格为500.00美元，然后根据用户检查添加适当的价格监测299.99 打印机129.99 演讲嘉宾49.99 CDRW 159.99 扫描仪129.99 调制解调器49.99

如果我只添加扫描仪，我的总价将为629.99美元。如果我添加调制解调器和显示器，我的总价将为849.98美元。

这是我目前的进展，我还没有添加太多的JS代码，因为我不确定如何添加此功能：

<html>
<head>
<title>Problem 9</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// Program name: Problem 9
// Purpose: Program 9 
// Author: Opack
// Date last modified: 2-13-12 
$(function() {
  function calculateCost() {
    var ret = 500;
    var $selected = $('input:checked', $peripherals);

    $selected.each(function() {
      ret += parseFloat($(this).attr('alt'));
    });

    return ret.toFixed(2);
  }

  function setCost() {
    $total.text(calculateCost());
  }

  var $peripherals = $('#peripherals');
  var $total = $('#total');
  $('input[type="checkbox"]', $peripherals).on('change', setCost);

  setCost();

});

</script>
<style>
  h1 {
    font-size: large;
  }
</style>
</head>
<body bgcolor="yellow">
    <h1>What peripherals do you want to add?</h1>
    <form id="peripherals">
        <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
        <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
        <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
        <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
        <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
        <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
        <label for="Cost">Total</label><input type="text" name="Cost" />
    </form>
</body>

</body>
</html>

Answer 1

这是家庭作业吗？

function calculation(a,b)
{
     return a + b;
}

SOURCE

W3Schools: Javascript Operators
W3Schools: Javascript Functions

Answer 2

这是我的attempt。我最终使用jQuery并自动更新成本。我将成本信息附加到复选框的“alt”属性。也可以通过其他方式完成此操作。调整它以适合您的目的。

jQuery代码，以防jsbin破产...

$(function() {
  function calculateCost() {
    var ret = 500;
    var $selected = $('input:checked', $peripherals);

    $selected.each(function() {
      ret += parseFloat($(this).attr('alt'));
    });

    return ret.toFixed(2);
  }

  function setCost() {
    $total.attr('value', calculateCost());
  }

  var $peripherals = $('#peripherals');
  var $total = $('input[name="Cost"]');
  $('input[type="checkbox"]', $peripherals).on('change', setCost);

  setCost();
});

相关的HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>Cost Demo/title>
<style>
  h1 {
    font-size: large;
  }
</style>
</head>
<body>
    <h1>What peripherals do you want to add?</h1>
    <form id="peripherals">
        <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
        <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
        <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
        <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
        <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
        <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
        <label for="Cost">Total</label><input type="text" name="Cost" />
    </form>
</body>
</html>

添加功能

2 个答案: