jQuery & JavaScript 练习：根据条件添加值

Question

如何根据条件使用 JavaScript/jQuery 进行计算：

单选按钮 'change' 事件。
如果用户点击"Yes"或"N/A"，旁边带有默认值的文本框的值将被添加并反映在Total

HTML:

<form>
    <fieldset>
        <input type="radio" name="remark[]" value="Yes" class="answer">Yes
        <input type="radio" name="remark[]" value="No" class="answer">No
        <input type="radio" name="remark[]" class="answer">N/A
        <input type="text" name="point1" class="score" value="3">
    </fieldset>
    <fieldset>
        <input type="radio" name="remark[]" value="Yes" class="answer">Yes
        <input type="radio" name="remark[]" value="No" class="answer">No
        <input type="radio" name="remark[]" class="answer">N/A
        <input type="text" name="point2" class="score" value="2">
    </fieldset>
    Total<input type="text" name="total" class="result">
</form>

Answer 1

不确定我是否理解正确，但首先你需要对你的标记进行一些更改，radio 组应该有不同的名称，所以第一组和 remark[0] remark[1] 第二个等等。 "N/A" 收音机似乎没有价值，所以我给它们添加了 value="NA"。所以你的 HTML 看起来像：

<form>
    <fieldset>
        <input type="radio" name="remark[0]" value="Yes" class="answer" />Yes
        <input type="radio" name="remark[0]" value="No" class="answer" />No
        <input type="radio" name="remark[0]" value="NA" class="answer" />N/A
        <input type="text" name="point1" class="score" value="3" />
    </fieldset>
    <fieldset>
        <input type="radio" name="remark[1]" value="Yes" class="answer" />Yes
        <input type="radio" name="remark[1]" value="No" class="answer" />No
        <input type="radio" name="remark[1]" value="NA" class="answer" />N/A
        <input type="text" name="point2" class="score" value="2" />
    </fieldset>Total
    <input type="text" name="total" class="result" />
</form>

然后我们只听收音机的 onchange，如果为每个组选择是或 N/A，我们就会得到它的总值。我在值上使用了 parseInt，因为它们是字符串，而且这些值似乎应该作为数字使用。（2+3 应该是 5 而不是 23）。

$('form input[type=radio]').on('change', function() {
    var total = 0;
    $('form fieldset').each(function(i) {
        var point = parseInt($(this).find('input[type=text]').val());
        var val = $(this).children('[name="remark[' + i + ']"]:checked').val();
        if(val == "Yes" || val == "NA")
            total += point;
    });
    $('input[name="total"]').val(total);
});

jsfiddle DEMO

Answer 2

原版 Javascript

注意：这些脚本与具有 class 名称的表单关联 calc

此脚本将与表单相关联，因此如果您有多个实例，每个表单将单独计算。

基本上对于每个表单 select 所有输入值 'Yes' 都被选中，然后找到该字段集的分数并将其添加到总数中

(Demo)

(function(){
    "use strict";
    function calculate() {
        var forms = document.querySelectorAll('.calc'), form, i;
        for (i = 0; form = forms[i]; i++) {
            var total = 0;
            var inputs = form.querySelectorAll('input[value="Yes"]:checked'), input, x;
            for (x = 0; input = inputs[x]; x++) {
                total += parseFloat(input.parentElement.lastElementChild.value);
            }
            form.lastElementChild.value = total;
        }
    }
    calculate();
    var inputs = document.querySelectorAll('.calc input'), input, x;
    for(x = 0; input = inputs[x]; x++) {
        input.onchange = calculate;
    }
})();

jQuery

如果您想使用 jQuery，这是转换为 jQuery

的同一个脚本

(Demo)

(function(){
    "use strict";
    function calculate() {
        $('.calc').each(function(){
            var total = 0;
            $('input[value="Yes"]:checked', this).each(function(){
                total += parseFloat($('input.score', this.parentElement).val());
            });
            $('input.result', this).val(total);
        });
    }
    calculate();
    $('.calc input').on('change', calculate);
})();

jQuery & JavaScript 练习：根据条件添加值

jQuery & JavaScript Excercise: Adding Values On Condition

html

javascript

checkbox

jquery

原版 Javascript

jQuery