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

Question

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

• 单选按钮“更改”事件。
• 如果用户点击“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

原版Javascript

注意：这些脚本与类名称为 calc 的表单相关联

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

基本上，对于每个表单，选择所有输入的值为“是”并被选中，然后找到该字段集的分数并将其添加到总分中

(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);
})();

Answer 2

不确定我的理解是否正确，但首先您需要对标记进行一些更改，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