添加单选和复选框总数？答案

【问题标题】：Adding radio and check box totals?添加单选和复选框总数？
【发布时间】：2014-02-27 00:02:49
【问题描述】：

我正在设计一家在线汽车商店，作为小型练习的一部分。除了总价外，一切都很顺利。我希望将选择添加到运行总计中，具体取决于我选择的单选按钮和复选框，而不是每次进行选择时，该选择的值都会累积到我的总计中。我希望我做出了正确的解释，任何人都可以提供任何帮助，我将不胜感激！

HTML：

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Configure Your GT  Sports Car</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-md-12">
    <div class="page-header">
    <header>
    <h1>Configure your GT Super Sportscar</h1>
    </header>
    </div></div></div>
    <form name="SportsCar" id="SportsCar">
    <p>
    <div class="row">
    <div class="col-md-12">
        <div class="row">
        <div class="col-md-6">
        <h3>Configuration</h3>
        <input type="radio" name="format" id = "Manual" value="27790.00">
        <label for = "Manual">GT Manual - €27,790.00</label>
        <br>
        <input type="radio" name="format" id = "Automatic" value="28590.00">
        <label for = "Automatic">GT Automatic - €28,590.00</label>
        <br>
        <input type="radio" name="format" id = "Smanual" value="32455.00">
        <label for = "Smanual">GT-S Manual - €32,455.00</label>
        <br>
        <input type="radio" name="format" id = "Sautomatic" value="33155.00">
        <label for = "Sautomatic">GT-S Automatic - €33,155.00</label>
        <br>
        </div>
        <div class="col-md-6">
        <h3>Car Colours</h3>
        <label for = "colour" >Please select a colour</label>
        <select name="colour" id="colour">
            <option value="black">Black</option>
            <option value="blue">Blue</option>
            <option value="red">Red</option>
            <option value="silver">Silver</option>
            <option value="white">White</option>
        </select>
        <img id="carImage" img src="images/black.jpg" alt="target_blank">
    </div></div></div></div>

    <div class="row">
    <div class="col-md-12">
    <h3>Factory Options</h3>
    <input type="radio" name="fOptions" id="combo1" value="1235.00">
        <label for="combo1">Option Combo 1 - €1,235.00</label>
    <br>
    (Power windows, Doors, Cruise Control)
    <br>
    <input type="radio" name="fOptions" id="combo2" value="3354.00">
        <label for="combo2">Option Combo 2 - €3,354.00</label>
    <br>
    (Rear spoiler & Fog Lamps, Key-less Entry, Power Tilt & Slide Moonroof, Power windows, Doors, Cruise Control)
    <br>
    <input type="radio" name="fOptions" id="noExtras" value="0.00">
        <label for="noExtras">No Extras - €0</label>
    </div></div>
    <br>
    <div class="row">
    <div class="col-md-12">


    <h3>Dealer Options</h3>
    <input type="checkbox" name="dealer" id="autochanger" value="550.00">
        <label for = "auto-changer">CD Auto-Changer - €550.00</label>
    <br>
    <input type="checkbox" name="dealer" id="security" value="399.00">
        <label for = "security">VIP Security System - €399.00</label>
    <br>
    <input type="checkbox" name="dealer" id="mirror" value="295.00">
        <label for = "mirror">Auto Dimming Mirror - €295.00</label>
    <br>
    </div></div>

    <div class="row">
    <div class="col-md-12">
     <br>
     <label for="total" class="control-label col-md-2">Total Cost</label>
     <input type="text" name="total" id="total" maxlength="3" readonly>
     </div></div>
     </p>
    </form>
    </div>
    </body>
    <script type="text/javascript">
    var source = new Array();
    window.addEventListener("load", preLoad, false);

    function preLoad(){
        source[0]="images/black.jpg";
        source[1]="images/blue.jpg";
        source[2]="images/red.jpg";
        source[3]="images/silver.jpg";
        source[4]="images/white.jpg";
    }

    carColour = document.getElementById("colour");
    function handleColour(){
    if(carColour.selectedIndex==0)
    {
        theImage.src=source[0];
    }
    else if(carColour.selectedIndex==1)
    {
        theImage.src=source[1];
    }
    else if(carColour.selectedIndex==2)
    {
        theImage.src=source[2];
    }
    else if(carColour.selectedIndex==3)
    {
        theImage.src=source[3];
    }
    else if(carColour.selectedIndex==4)
    {
        theImage.src=source[4];
    }
    }
    theImage=document.getElementById("carImage");
    carColour.addEventListener("click", handleColour, false);


    </script>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/calculate.js"></script>
    </html>

Javascript

function formatCurrency(num) {
  num = num.toString().replace(/\€|\,/g,'');
  if(isNaN(num))
   {num = "0";}
  sign = (num == (num = Math.abs(num)));
  num = num.toFixed(2);
  elements= num.split(".");
  num = elements[0];
  cents = elements[1];
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  {num = num.substring(0,num.length-(4*i+3))+','+
   num.substring(num.length-(4*0+3));}
  return (((sign)?'':'-') + '€' + num + '.' + cents)
}

window.addEventListener("load", handleLoad, false);
function handleLoad(){
runningTotal=parseInt(document.getElementById("Manual").value);
document.getElementById("total").value=formatCurrency(runningTotal);
}

cars = document.getElementById("Manual");
cars.addEventListener("click", handleConfig, false);
function handleConfig(){
if(manual.checked){
    runningTotal = parseInt(document.getElementById("manual").value);
    document.getElementById("total").value=formatCurrency(runningTotal);

    }
}

cars = document.getElementById("Automatic");
cars.addEventListener("click", handleConfigOne, false);
function handleConfigOne(){
if(Automatic.checked){
    runningTotal = parseInt(document.getElementById("Automatic").value);
    document.getElementById("total").value=formatCurrency(runningTotal);

    }
}


cars = document.getElementById("Smanual");
cars.addEventListener("click", handleConfigTwo, false);
function handleConfigTwo(){
if(Smanual.checked){
    runningTotal = parseInt(document.getElementById("Smanual").value);
    document.getElementById("total").value=formatCurrency(runningTotal);

    }
}

cars = document.getElementById("Sautomatic");
cars.addEventListener("click", handleConfigThree, false);
function handleConfigThree(){
if(Sautomatic.checked){
    runningTotal = parseInt(document.getElementById("Sautomatic").value);
    document.getElementById("total").value=formatCurrency(runningTotal);

    }
}





var option = document.getElementById("combo1");
option.addEventListener("click", handleClick, false);

function handleClick(){

    if(combo1.checked)
    {
    list=parseInt(document.getElementById("combo1").value);
    runningTotal+=list;
    document.getElementById("total").value=formatCurrency(runningTotal);
    }
}

var factory = document.getElementById("combo2");
factory.addEventListener("click", handleExtrasTwo, false);

function handleExtrasTwo(){

    if(combo2.checked)
    {
    list=parseInt(document.getElementById("combo2").value);
    runningTotal+=list;
    document.getElementById("total").value=formatCurrency(runningTotal);
    }
}

var extras = document.getElementById("noExtras");
extras.addEventListener("click", handleNoExtras, false);

function handleNoExtras(){
    if(noExtras.checked)
    {
    var noList=parseInt(document.getElementById("noExtras").value);
    runningTotal += noList;
    document.getElementById("total").value=formatCurrency(runningTotal);
    }
}

var dealerOptions = document.getElementById("autochanger");
dealerOptions.addEventListener("click", handleOptions,false);

function handleOptions(){
    if(autochanger.checked)
    {
    autoChange=parseInt(document.getElementById("autochanger").value);
    runningTotal +=autoChange;
    document.getElementById("total").value=formatCurrency(runningTotal);
    }
}

var dealerOption = document.getElementById("security");
dealerOption.addEventListener("click", handleOptionsTwo,false);

function handleOptionsTwo(){
    if(security.checked)
    {
    secure=parseInt(document.getElementById("security").value);
    runningTotal+=secure;
    document.getElementById("total").value=formatCurrency(runningTotal);
    }
}


var dealerOptionThree = document.getElementById("mirror");
dealerOptionThree.addEventListener("click", handleOptionThree,false);

function handleOptionThree(){
    if(mirror.checked)
    {
    mirror=parseInt(document.getElementById("mirror").value);
    runningTotal += mirror;
    document.getElementById("total").value=formatCurrency(runningTotal);
}
}

【问题讨论】：

让我直截了当地说...您不想在每次点击时增加总数，而是要在那个瞬间显示所选值的总数，是这样吗？
现在每次我点击一个选择时，它都会将该值添加到总数中，但是当我选择另一个复选框或单选按钮时，它不会删除从最后一个选择中添加的值，如果这有意义的话?

标签： javascript html checkbox radio-button

【解决方案1】：

由于您的页面中已经包含 jquery，您应该使用它。它让你的生活变得如此简单。以您的代码为基础，我创建了一个简单的方法来汇总所选元素（单选或复选框）的值，并将其显示在整个文本框上。
这样您就不必放置所有这些点击事件。

检查一下：（请参阅此小提琴上的运行示例：http://jsfiddle.net/b3p4r/）

$("input").change(function() {
    var total = 0;
    $("input").each(function() {
        if($(this).is(":checked"))
            total += parseFloat($(this).val());
    });
    $("#total").val(formatCurrency(total));
});

【讨论】：

对不起，我应该在 OP 中提到我们还没有完成 JQuery，你看到的那段代码是在我们开始练习之前提供的，我想做的对练习来说不是必需的，但我'还是想知道怎么做