Question

我有一个简单的复选框代码，每个组2个复选框。

    <div class='product-addon'>
        <p>Interfejsy</p>
        <label>
            <input id='option0' type='checkbox' name='Interfejsy' value='150.00'>
            Moduł rozszerzenia 1: 2x RS232 <span class='addon-price'>150,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='Interfejsy' value='370.67'>
            Moduł rozszerzenia 2: WiFi <span class='addon-price'>370,67</span>
        </label>
    </div>
    <div class='product-addon'>
        <p>BAZA</p>
        <label>
            <input id='option0' type='checkbox' name='BAZA' value='60.00'>
            Rozszerzenie bazy PLU o 2000 kodów  <span class='addon-price'>60,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='BAZA' value='80.00'>
            Rozszerzenie bazy PLU o 4000 kodów  <span class='addon-price'>80,00</span>
        </label>
    </div>

我的问题是：当用户单击复选框时，如何获取总价格（checkbox.val（））？例如，用户单击第一组中值为150.00的复选框，然后单击第二组中值为80.00的复选框？总金额应为230.00 重要提示：用户只能在组中选择一个复选框。

我有那个js代码：

    var totalSum = 0;
    $("input:checkbox").on('click', function() {
      var $box = $(this);

      if ($box.is(":checked")) {
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        var addonPrice = parseFloat($box.val());
        $(group).prop("checked", false);
        $box.prop("checked", true);
      } else {
        $box.prop("checked", false);
      }

      totalSum += addonPrice;
      console.log(totalSum);
    });

但是当我单击任何插件时，变量totalSum总是越来越高。例如，我单击组1中值= 150的复选框，然后单击组2中值= 60，totalSum = 210的复选框，这很好，但是当我再次单击某些复选框时，它将添加下一个值。

我只是不想这样： 1）用户单击组1中的值为150的复选框 2）用户单击第2组中值= 60的复选框 3）totalSum是210 4）用户单击第2组中的值为80的复选框 5）totalSum是230，而不是290

感谢任何建议

Answer 1

如果未选中，则不要减去更改后的输入的值。

另一种方法是只选择所有选中的输入并求和它们的值。

类似这样的东西：

$("input:checkbox").change(function(e){
    if($(this).is(":checked")){
        $(`[name=${this.name}]`).not($(this)).prop("checked", false);
    }
    var total = $.makeArray($("input:checkbox:checked").map(function(){
        return parseInt($(this).val());
    })).reduce((a, c) => (a+c), 0)
    console.log(total)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='product-addon'>
        <p>Interfejsy</p>
        <label>
            <input id='option0' type='checkbox' name='Interfejsy' value='150.00'>
            Moduł rozszerzenia 1: 2x RS232 <span class='addon-price'>150,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='Interfejsy' value='370.67'>
            Moduł rozszerzenia 2: WiFi <span class='addon-price'>370,67</span>
        </label>
    </div>
    <div class='product-addon'>
        <p>BAZA</p>
        <label>
            <input id='option0' type='checkbox' name='BAZA' value='60.00'>
            Rozszerzenie bazy PLU o 2000 kodów  <span class='addon-price'>60,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='BAZA' value='80.00'>
            Rozszerzenie bazy PLU o 4000 kodów  <span class='addon-price'>80,00</span>
        </label>
    </div>

单选按钮将更适合您要执行的操作，而不是复选框。

Answer 2

您的主要问题是，在回调函数之外，您只初始化一次totalSum ，因此无论发生了多少点击，总不会重置。必须将其移至函数中，以便您以总计0开始，并在每次连续单击时获得总计。

现在，根据您对复选框的选中状态的切换操作，很明显您应该使用单选按钮，而不是复选框。而且，进行更改使解决方案更加简单。

请参见下面的内联评论：

$("input:radio").on('click', function() {
  var totalSum = 0;   // Start getting a new total on each new click
  
  // Just loop over only the checked radio buttons
  $("input[type='radio']:checked").each(function(index, element){
    totalSum += +$(element).val(); // Add up their values
  });
    
  console.clear(); console.log(totalSum.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='product-addon'>
        <p>Interfejsy</p>
        <label>
            <input id='option0' type='radio' name='Interfejsy' value='150.00'>
            Moduł rozszerzenia 1: 2x RS232 <span class='addon-price'>150,00</span>
        </label>
        <label>
            <input id='option1' type='radio' name='Interfejsy' value='370.67'>
            Moduł rozszerzenia 2: WiFi <span class='addon-price'>370,67</span>
        </label>
</div>
<div class='product-addon'>
        <p>BAZA</p>
        <label>
            <input id='option0' type='radio' name='BAZA' value='60.00'>
            Rozszerzenie bazy PLU o 2000 kodów  <span class='addon-price'>60,00</span>
        </label>
        <label>
            <input id='option1' type='radio' name='BAZA' value='80.00'>
            Rozszerzenie bazy PLU o 4000 kodów  <span class='addon-price'>80,00</span>
        </label>
    </div>

复选框值的总和

2 个答案: