jquery - 如果选中复选框，则将值添加到变量，如果未选中，则恢复以前的值(jquery)

Question

我是一个jquery菜鸟(“noob”我的意思是“我几个小时前开始使用jquery”)。我想要做的非常简单:在选中复选框时向变量添加一个值，如果未选中复选框则恢复同一变量的先前值。该值必须写入文档的范围内。我编写的代码有两个问题:

1-当我取消选中该复选框时，该值不会恢复；

2-我希望该值始终显示在文档中，即使在第一次加载页面时也是如此，我根本不知道如何执行此操作(现在它出现在第一次单击后，因为它写在如果条件)

这是脚本:有什么问题吗？

<script type="text/javascript">
    var pds1=0;
    $(document).ready(function() {
        $("#mat1").click(function() {
            if($('#mat1').is(':checked')) { 
                pds1=pds1+10;
                $('#perk1').html(pds1);
            } 
            else {
                if(pds1>0)
                {
                    pds1=pds1-10;
                }
                else {}
            }
        });
    });
</script>

这是 HTML:

<input id="mat1" type="checkbox" /> <span id="perk1"></span>

Answer 1

无论选中还是未选中，您都必须更新范围。您的代码将如下所示:

var pds1 = 0;
$(document).ready(function () {
    $('#perk1').html(pds1);

    $("#mat1").click(function () {
        if ($('#mat1').is(':checked')) 
           pds1 = pds1 + 10;
        else if (pds1 > 0) 
           pds1 = pds1 - 10;
        $('#perk1').html(pds1);
    });
});

jsFiddle:http://jsfiddle.net/eHasK/2/