Question

我需要根据用户选中复选框添加和删除数字“7”，然后在页面上显示该数字：

var theTotal = 0;

 $("#highlightChk").change(function() {
      var ishchecked= $(this).is(':checked');
      if(!ishchecked)  theTotal -= 7;
      if(ishchecked) theTotal += 7;

}); 

$('#total').text(theTotal);

当我显示代码时，即使我选中复选框，它也是“0”。我究竟做错了什么？

Answer 1

在#total中放置一个初始值，每次操作完成后，读取该值并解析它并添加或减去该值。必须在#total事件处理程序中更新change元素。

＆＃13;

$(function() {
    $("#highlightChk").on('change', function() {
        //READ & PARSE existing value
        var total = +$('#total').text();
        //INC-/DECREMENT value accordingly
        total += this.checked ? 7 : -7;
        //UPDATE DOM with new value
        $('#total').text( total ); //<<--- BELONGS INSIDE
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="highlight" id="highlightChk"/> Highlight<br><br>
Total: <div id="total">0</div>

＆＃13;

Answer 2

您需要将$('#total').text(theTotal);放在更改方法

中

$("#highlightChk").change(function () {
    var theTotal = 0;
    var ishchecked = $(this).is(':checked');
    if (!ishchecked) theTotal -= 7;
    else theTotal += 7;
    $('#total').text(theTotal);
});

由于theTotal作为全局变量始终为0，但当它位于jquery .change()方法的本地范围内时，您将始终获得正确的更改值。

FIDDLE DEMO #1

您还可以使用更少的代码来实现相同的结果，例如： -

$("#highlightChk").change(function () {
    $('#total').text(this.checked ? 7 : 0);
});

FIDDLE DEMO #2

将数字添加到值

2 个答案: