添加具有多个值的复选框

Adding checkbox with multiple value

本文关键字：复选框 添加      更新时间：2023-09-26

我在复选框中有一组书，用户可以选择。每次检查一本书，价格就会加起来。我还需要添加相应的权重。我修改了这个非常有用的例子，但没有用。

<label class="checkbox" for="Checkbox1">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
    <input value="50" bweight=".4"  type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
    <input value="30" bweight=".2" type="checkbox" class="sum" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
    <input value="20" bweight=".6"  type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn
</label>
<div class="card-charge-info">
    <span id="payment-total">0</span>
</div>

var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');
    totwgt = document.getElementById('payment-w');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        var add = this.wgt * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
        totwgt.innerHTML = parseFloat(total1.innerHTML) + add
    }
}

这是代码https://jsfiddle.net/u8bsjegk/2/

您的代码中存在几个问题。首先，您在两个位置定义add变量，一个用于值，另一个用于权重，因此您的计算从此处中断。还要注意，bweight不是input元素上的有效属性。要添加您自己的元数据，您应该使用data-*属性。

试试这个：

var inputs = document.getElementsByClassName('sum'),
    totalValue = document.getElementById('payment-total'),
    totalWeight = document.getElementById('payment-w');

for (var i = 0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var value = parseFloat(this.value);
        var weight = parseFloat(this.dataset.weight);
        totalValue.innerHTML = parseFloat(totalValue.innerHTML) + value
        totalWeight.innerHTML = parseFloat(totalWeight.innerHTML) + weight
    }
}

正如您用jQuery标记这个问题一样，这里有一个的工作实现

var $inputs = $('.sum'),
    $totalValue = $('#payment-total'),
    $totalWeight = $('#payment-w');
$inputs.change(function() {
    var value = parseFloat(this.value);
    var weight = parseFloat($(this).data('weight'));
    $totalValue.text(function(i, text) {
        return parseFloat(text) + value;
    });
    $totalWeight.text(function(i, text) {
        return parseFloat(text) + weight;
    });
})

工作示例

您有几个问题：

  • 重新声明add变量
  • 你在total1中有错别字，应该是totwgt
  • 您没有payment-w id的元素
  • 应该使用this.getAttribute('bweight')而不是this.wgt

https://jsfiddle.net/u8bsjegk/6/

相关文章：