javascript - 循环遍历复选框并减去一个值

Question

我有一系列复选框，每个复选框都有不同数量的分数，如果未选中该复选框，我想从总共 100 分中扣除这些分数。点值由复选框的 CSS 类指定。在此示例中，每个框值 10 分，因此如果两个框都保持选中状态，则分值 = 100，1 个未选中 = 90，2 个未选中 = 80 等。类似地，如果用户决定再次选中该框，我需要添加10 分回到总分。

$(document).ready(function () {
$('[class*="Score"]').change(function () {
    calculateScore();
});

function calculateScore() {
    var total = 100;
    $(".Score10").each(function () {
        if ($(this).is(':checked)')) {
            total += 10;
        } else {
            total -= 10;
        }});

<asp:CheckBox ID="chkScore_Greeting" runat="server" CssClass="Score10" 
Checked="true" /> 
<asp:CheckBox ID="chkScore_Authentication" runat="server" 
CssClass="Score10" Checked="true" />

Answer 1

我给了你同一种东西的两种口味。两者都使用 DOM 元素的内置数据集属性来实现“每个值不同的点”。

版本 1:从 100 中减去任何未检查的重量。

$(document).ready(function () {
  $(document).on('change', '.Score', function() {
    var score = 100 - $('.Score:not(:checked)').toArray().reduce(
      (acc, cur) => acc + parseInt(cur.dataset.weight), 0);
    console.log(score);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="thing1" data-weight="10" class="Score" checked="true"/>1<br />
<input type="checkbox" name="thing2" data-weight="5" class="Score" checked="true"/>2<br />

版本 2:通过选中/取消选中的复选框的权重修改当前分数。

var score = 100;

$(document).ready(function () {
  $(document).on('change', '.Score', function() {
    score += parseInt(this.dataset.weight) * (this.checked?1:-1)
    console.log(score);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="thing1" data-weight="10" class="Score" checked="true"/>1<br />
<input type="checkbox" name="thing2" data-weight="5" class="Score" checked="true"/>2<br />