對輸入文本和單選的動態值求和

Question

我正在嘗試將動態變化的輸入文本的值與也動態變化的收音機相加。 我在做正確的事情，但也做錯了事情，因為它不會在我想要的時候求和。 總和應該在每次輸入文本更改時顯示，而不是隨機消失，然后單擊收音機，只需將它們相加即可。

小提琴http://jsfiddle.net/7tFhx/

和代碼

<form id="myForm" accept-charset="UTF-8">
    <button type="button" class="btn-tt btn-primary btn-lg" disabled>1. Elige el color</button></br>
        <label>
            <input class="calc" id="fb1" type="radio" name="fb" value="10">
            <img src="img/01.jpg"/>
        </label>            
        <label>
            <input class="calc" id="fb2" type="radio" name="fb" value="15">
            <img src="img/02.jpg"/>
        </label>
    </br>
    </br>
    <button type="button" class="btn-tt btn-primary btn-lg" disabled>2. Elige las medidas</button></br>
    <div class="row">
        <div class="col-xs-2">
            ancho (cm.)
            <input id="ancho" type="text" class="form-control" placeholder="100">
        </div>
        <div class="col-xs-2">
            alto (cm.)
            <input id="alto" type="text" class="form-control" placeholder="100">
        </div>      
        <div class="col-xs-2">
            cantidad
            <input id="cantidad" type="text" class="form-control" placeholder="1">
        </div>
    </div>
    </br>
    <button type="button" class="btn-tt btn-primary btn-lg" disabled>3. Posición mecanismo</button></br>
        <label>
            <input class="calc" id="fb3" type="radio" name="fb1" value="20">
            <img src="img/01.jpg"/>
        </label>            
        <label>
            <input class="calc" id="fb4" type="radio" name="fb1" value="35">
            <img src="img/02.jpg"/>
        </label>

    <div>
        Total: <span id="price">0</span>€
    </div>
</form>

js：

$(function(){    

var mecanismoMedida = ['100','200'];
var mecanismoPrecio = ['50','80'];

$('#ancho').on('input',function(){
var j = 1, i = 0;
value = parseInt(($("#ancho").val() / 8) + 1);

for(i = 0; i < mecanismoMedida.length; i++){
    if($("#ancho").val() >= mecanismoMedida[i] && $("#ancho").val() < 
mecanismoMedida[j]){
        value += mecanismoPrecio[i];
        break;
    } else {
        j++;
    }
}

$("#price").text(this.value + value);
});

$('#myForm input[type="radio"]').on('change', function () {
    var sum = 0;
    $("#myForm").find("input[type='radio']:checked").each(function () {
        sum += parseInt(this.value);
    });
    $("#price").text(sum);
});
});

Answer 1

如果這是一個簡單的求和，您可以簡單地在 keyup 上運行更新代碼並更改所有輸入元素的事件：

$("input").change(function(){update();}).keyup(function(){update();});

要更新它們，首先您需要檢查並查看兩個單選按鈕中的哪一個被選中並獲取其值：

function update(){

    var p = 0;
    for(var i = 0; i < $(".calc").val(); i++)
    {
        if($($(".calc")[i]).prop("checked") == true)
        {
            p += parseInt($($(".calc")[i]).val());
        }
    }

之后，只需將文本框的值解析為整數並將它們添加到單選按鈕的值中。 我創建了一個自定義 function 來執行此操作，因為如果框為空，則解析它們會返回 NaN：

    p = parseInt(p);

    p += parseInt(val2($("#ancho")));
    p += parseInt(val2($("#alto")));
    p += parseInt(val2($("#cantidad")));

    p = parseInt(p);

    $("#price").html(p);
}

function val2(elm){
    if(isNaN(parseInt($(elm).val())))
       return 0;
    else
        return parseInt($(elm).val());
}

JSFiddle