Question

I’m a noob with jquery (and for “noob” I mean “I began using jquery a few hours ago”). What I want to do is quite simple: add a value to a variable when a checkbox is checked, restore the previous value of the same variable if the checkbox is not checked. The value must be written inside a span of the document. I have two problems with the code I wrote:

1- The value is not restored when I uncheck the checkbox;

2- I want the value to be always shown in the document, even at the first load of the page and I simply don’t know how to do this (now it appears after the first click, because it’s written inside the if condition)

Here’s the script: what’s wrong with it?

<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>

And here’s the HTML:

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

Answer 1

You have to update the span wherever it’s checked or unchecked.
Your code would look like this:

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/