Question

这是我的HTML代码

<tr>
        <td style="width: 200px" >&nbsp;&nbsp;<label> Subject</label>&nbsp;</td>
        <label class="checkbox">
        <td colspan="1"><input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Bahasa Malaysia
        </label>
        <label class="checkbox">
        <td colspan="1"><input value="50" type="checkbox" class="sum" data-toggle="checkbox">Bahasa Inggeris</td>
        </label>
        <label class="checkbox">
        <td colspan="1"><input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Bahasa Cina</td>
        </label>
        <label class="checkbox">
        <td colspan="1"><input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Mathematic</td>
        </label>
        <label class="checkbox">
        <td colspan="1"><input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Math Tambahan</td>
        </label>
    </tr>

这是我的javascript

   var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('fees');

  for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.value = parseFloat(total.value) + add
    }
}

我现在面临的问题是，当我勾选复选框时，文本字段中的值无法显示，每个复选框值为50，当我勾选它时，它将出现在文本框中并且总和全部。但是我得到的值现在是楠。请帮助我。谢谢你

Answer 1

复选框值在技术上是字符串而不是数字。您需要将其转换为数字：

var inputs = document.getElementsByClassName('sum'),
     total = document.getElementById('fees');

 for (var i = 0; i < inputs.length; i++) {
     inputs[i].onchange = function () {
         /* Use parseInt(this.value) otherwise it is a String */
         var add = parseInt(this.value) * (this.checked ? 1 : -1); 
         total.value = parseFloat(total.value) + add
     }
 }

https://jsfiddle.net/8c9ntfcu/

Answer 2

为每个输入添加onChange="add()"。

然后使用以下javascript ..



var inputs = document.getElementsByClassName('sum'),
var total = document.getElementById('fees');

var add = function () {
    var amount = 0;
    for (var i = 0; i < inputs.length; i++) {
       if (inputs[i].checked === true) {
            amount += parseInt(inputs[i].value, 10);
        }
    }
    console.log(amount);
};

var inputs = document.getElementsByClassName('sum'), var total = document.getElementById('fees'); var add = function () { var amount = 0; for (var i = 0; i < inputs.length; i++) { if (inputs[i].checked === true) { amount += parseInt(inputs[i].value, 10); } } console.log(amount); };

fiddle

Html总和的复选框

2 个答案: