Question

我有一个代码，它根据选中的复选框和下拉列表中的值计算总数。

这是HTML

<tr>
    <<input onclick="clickCh(this)" type="checkbox" value="10" />
    </td>
</tr>
<tr>
    <input onclick="clickCh(this)" type="checkbox" value="10" />
    </td>
</tr>
<tr>
    <input onclick="clickCh(this)" type="checkbox" value="10" />
    </td>
</tr>
<tr>
    <input onclick="clickCh(this)" type="checkbox" value="10" />
    </td>
</tr>

对于下拉框，它就像这样

<select onchange="dropCh(this)">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
</select>

这是我的javascript加总和，但是我在下拉列表中遇到onchange函数的问题，我无法弄清楚如何在使用新值之前减去选择的旧值。

function clickCh(caller) {
    var total = document.getElementById("total");
    if (caller.checked) {
        add(caller);
    } else {
        subtract(caller);
    }
}

function add(caller) {
    total.value = total.value * 1 + caller.value * 1;
}

function subtract(caller) {
    total.value = total.value * 1 - caller.value * 1;
}

function dropCh(caller) {
    var total = document.getElementById("total");
    total.value = total.value * (1 + caller.value * 0.1);
}

我知道我需要添加一个js代码来删除该值，然后在从下拉选项中选择时添加下一个值。有人能告诉我入住的方向。

Answer 1

这里是公式：每个复选框10个，如果x是下拉框中的值，则总计=总计*（1 + x * 0.1）

我将假设total右侧的=是复选框的总和，例如：

total = (totalOfCheckboxes) * (1 + dropDownValue * 0.1);

所以在更改或点击时，计算总数如下：

var checkboxes = document.querySelectorAll("input[type=checkbox]"); // You may want to limit this selector more
var dropDownValue = +document.getElementById("selectBox").value;      // Add this id to the markup
var i;
var totalOfCheckboxes = 0;
for (i = 0; i < checkboxes.length; ++i) {
    if (checkboxes[i].checked) {
        totalOfCheckboxes += +checkboxes[i].value;
    }
}
document.getElementById("total").value = totalOfCheckboxes * (1 + dropDownValue * 0.1);

Answer 2

选中 Demo Fiddle

function dropCh(caller) {
    var total = document.getElementById("total");
    var value = 0;
    $('td input[type="checkbox"]').each(function(){
        value = value + parseInt($(this).val());
    });
    console.log(value +' '+( 1 + caller.value * 0.1));
    total.value = value * (1 + caller.value * 0.1);
}

上述功能每次都会检查复选框的值，因此即使取消选中复选框，也会得到正确的值。

基于下拉框的逻辑错误在javascript中添加

2 个答案: