Question

我有一系列复选框，如果未选中该复选框，则每个复选框都值得从总共100个中扣除不同数量的积分。点值由复选框的CSS类指定。在这个例子中，每个盒子值10点，所以如果两个盒子都保持选中状态，则点值= 100,1 unchecked = 90,2 unchecked = 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

你的问题是双重的。

首先，您需要在函数total之外设置变量calcuateScore() 。目前，只要您的复选框发生变化，total设置为100，然后逻辑触发。

其次，你传递错误的$(this)引用时你的jQuery切换不起作用（因为你想要点击的那个，而不是循环遍历它们））。要解决此问题，您需要在this调用中将calculateScore()的JavaScript版本作为参数传递。然后，您可以检查是否使用.ischecked检查了该元素。

这可以在下面的工作示例中看到，我已经用HTML替换了HTML复选框：

$(document).ready(function() {

  $('[class*="Score"]').change(function() {
    calculateScore(this);
  });

  var total = 100;

  function calculateScore(checkbox) {
    if (checkbox.checked) {
      total += 10;
    } else {
      total -= 10;
    }
    console.log(total);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="Score10" checked="true" />
<input type="checkbox" class="Score10" checked="true" />

希望这有帮助！：）

Answer 2

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

版本1：减去未检查的任何内容的重量。

$(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 />

Answer 3

停止添加10.您已经从100开始。剩下要做的唯一事情是每个未检查的减去10。换句话说，你只需要＆＃34;否则＆＃34;部分你的情况。

循环复选框并减去值

3 个答案: