Javascript 复选框/单选按钮-添加所选项目的总价_Javascript

Javascript 复选框/单选按钮-添加所选项目的总价

javascript

Javascript 复选框/单选按钮-添加所选项目的总价,javascript,Javascript,我目前正在使用单选按钮和复选框。在这个示例项目中，我有单选按钮和复选框，根据用户选择的值显示图像如何为所选的每个项目添加价值价格，并在底部显示总成本下面的js显示了基于所选值显示图像的过程 JS <script> function check_value(currentElement, val, id, type) { var el = document.getElementById("imgBox" + id); if (val > 0 &&

我目前正在使用单选按钮和复选框。在这个示例项目中，我有单选按钮和复选框，根据用户选择的值显示图像

如何为所选的每个项目添加价值价格，并在底部显示总成本

下面的js显示了基于所选值显示图像的过程

<script>
function check_value(currentElement, val, id, type) {
    var el = document.getElementById("imgBox" + id);
    if (val > 0 && val < 4) { //will trigger when [1,2,3]

        if(currentElement.checked)
        {
            el.src = "images/" + type + val + ".jpg";
            el.style.display = "";
        }
        else
        {
            el.src = "";
            el.style.display = "none";
        }           
    }
}    
</script>


函数检查值（currentElement、val、id、类型）{
var el=document.getElementById（“imgBox”+id）；
如果（val>0&&val<4）{//将在[1,2,3]时触发
如果（currentElement.checked）
{
el.src=“images/”+type+val+”.jpg”；
el.style.display=“”；
}
其他的
{
el.src=“”；
el.style.display=“无”；
}           
}
}

HTML

<h2>Choose a bike</h2>
<form name="builder">
    <input type="radio" name="field" onclick='check_value(this, 1, 1, "bike")'/> KAWASAKI KX 450F- $8,399<br />
    <input type="radio" name="field" onclick='check_value(this, 2, 1, "bike")'/> 2010 Yamaha Road Star S- $13,090<br />
    <input type="radio" name="field" onclick='check_value(this, 3, 1, "bike")'/> Aprilia RSV4- $16,999<br />
</form>

<img id="imgBox1" src="#" style="display:none"> 

<h2>Choose a tire</h2>  
<form name="tire">
    <input type="radio" name="field" onclick='check_value(this, 1, 2, "tire")'/> Michelin Pilot Road 3 Tires- $299.99<br />
    <input type="radio" name="field" onclick='check_value(this, 2, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires- $154.99<br />
    <input type="radio" name="field" onclick='check_value(this, 3, 2, "tire")'/> Pirelli Scorpion Trail Tires- $119.99<br />
</form>

<img id="imgBox2" src="#" style="display:none">

<h2>Choose Accesories</h2>
<form name="tire">
    <input type="checkbox" name="field" onclick='check_value(this, 1, "3a", "accessories")'/> Chrome Front Plate- $246.50<br />
    <input type="checkbox" name="field" onclick='check_value(this, 2, "3b", "accessories")'/> Jacket- $87.99<br />
    <input type="checkbox" name="field" onclick='check_value(this, 3, "3c", "accessories")'/> Gloves- $35.99            
</form>

<div id="accessories">
    <img id="imgBox3a" src="#" style="display:none">
    <img id="imgBox3b" src="#" style="display:none">
    <img id="imgBox3c" src="#" style="display:none">
</div>

选择一辆自行车
川崎KX 450F-8399美元

2010年雅马哈路星S-13090美元

Aprilia RSV4-16999美元

选择一个轮胎
米其林Pilot Road 3轮胎-299.99美元

Dunlop Roadsmart运动旅行轮胎-154.99美元

倍耐力蝎子轮胎-119.99美元

选择附件
镀铬前面板-246.50美元

夹克-87.99美元

手套-35.99美元

我会开始

删除不必要的表单标签并将其减少为一个

更改输入名称（例如：收音机的“cylces”和“tire”以及“frontPlate”见下面的代码）

更正函数（减少参数）并将价格设置为输入字段的值属性

为循环添加

，

，以计算当前总计

我们到了

<head>
    <title></title>
    <script>
        function check_value(curElem, id) {
            var el = document.getElementById("img" + curElem.name);
            el.src = "images/" + curElem.name + id + ".jpg";
            if (!curElem.checked)
                el.style.display = "none";
            else
                el.style.display = "block";

            // calculate Total
            var total = 0;
            var controls = document.getElementsByTagName('input');
            for (var i = 0; i < controls.length; i++) {
                if ((controls[i].type === 'radio' || controls[i].type === 'checkbox') && controls[i].checked)
                    total = total + parseFloat(controls[i].value);
            }
            document.getElementById("total").innerHTML = total;
            //alert("Total: " + total);
        }    
    </script>
</head>
<body>
    <form name="builder">
        <h2>
            Choose a bike</h2>
        <input type="radio" name="Bike" value="8399" onclick='check_value(this, 1)' />
        KAWASAKI KX 450F- $8,399<br />
        <input type="radio" name="Bike" value="13090" onclick='check_value(this, 2)' />
        2010 Yamaha Road Star S- $13,090<br />
        <input type="radio" name="Bike" value="16999" onclick='check_value(this, 3)' />
        Aprilia RSV4- $16,999<br />
        <img id="imgBike" src="#" style="display: none" />
        <h2>
            Choose a tire</h2>
        <input type="radio" name="Tire" value="299.99" onclick='check_value(this, 1)' />
        Michelin Pilot Road 3 Tires- $299.99<br />
        <input type="radio" name="Tire" value="154.99" onclick='check_value(this, 2)' />
        Dunlop Roadsmart Sport-Touring Tires- $154.99<br />
        <input type="radio" name="Tire" value="119.99" onclick='check_value(this, 3)' />
        Pirelli Scorpion Trail Tires- $119.99<br />
        <img id="imgTire" src="#" style="display: none" />
        <h2>
            Choose Accesories</h2>
        <input type="checkbox" name="FrontPlate" value="246.50" onclick='check_value(this, "")' />
        Chrome Front Plate- $246.50<br />
        <input type="checkbox" name="Jacket" value="87.90" onclick='check_value(this, "")' />
        Jacket- $87.99<br />
        <input type="checkbox" name="Gloves"  value="35.99" onclick='check_value(this, "")' />
        Gloves- $35.99
        <div id="accessories">
            <img id="imgFrontPlate" src="#" style="display: none" />
            <img id="imgJacket" src="#" style="display: none" />
            <img id="imgGloves" src="#" style="display: none" />
        </div>
        <div id="total"></div>
    </form>
</body>


函数检查值（curElem，id）{
var el=document.getElementById（“img”+curElem.name）；
el.src=“images/”+curElem.name+id+“.jpg”；
如果（！curElem.选中）
el.style.display=“无”；
其他的
el.style.display=“块”；
//计算总数
var合计=0；
var controls=document.getElementsByTagName（'input'）；
对于（变量i=0；i
2010年雅马哈路星S-13090美元

Aprilia RSV4-16999美元

选择一个轮胎
米其林Pilot Road 3轮胎-299.99美元

Dunlop Roadsmart运动旅行轮胎-154.99美元

倍耐力蝎子轮胎-119.99美元

选择附件
镀铬前面板-246.50美元

夹克-87.99美元

手套-35.99美元

虽然这可能是您答案的解决方案，但我看不出这段代码的用途。在实际环境中，大部分数据将来自服务器生成的，因此您必须完全重新编写此代码