Perform action on check box

Question

How can I change this function so that it performs it after a user checks a box, instead of clicking on a button? Also, if they uncheck, another function gets executed.

 $("#saveData")
     .click(function (e) {
     e.preventDefault();
     localStorage.setItem("flag", "set");
     var data = $("#form1").serializeArray();
     $.each(data, function (i, obj) {
         if (obj.name != "creditCard") {
             localStorage.setItem(obj.name, obj.value);
         }
     });
 });

Here's the input field,

<input id="saveAddress" type="checkbox" name="address">Save Address

Answer 1

Well, with there information I have here are some basic guidlines:

$('#checkbox_element').change(function(){
  if(this.checked){
    //checkbox checked, do your thing
  }else{
    //it has been unchecked
  }
});

JSFiddle Example: http://jsfiddle.net/uHEhh/1/

Answer 2

Change $("#saveData").click to $("#saveAddress").click , so you get something like:

$("#saveAddress")
     .click(function (e) {
     e.preventDefault();
     localStorage.setItem("flag", "set");
     var data = $("#form1").serializeArray();
     $.each(data, function (i, obj) {
         if (obj.name != "creditCard") {
             localStorage.setItem(obj.name, obj.value);
         }
     });
 });

(also you can use $(this).(':checked') inside the event handler to perform different actions for checking/unchecking)

Answer 3

You could do it like this:

 $("#saveAddress").click(function(e) {
   if($(this).prop("checked")) {
    localStorage.setItem("flag", "set");
    var data = $("#form1").serializeArray();
    $.each(data, function(i, obj) {
        if(obj.name != "creditCard") {
            localStorage.setItem(obj.name, obj.value);
        }
    });             
   } else {
       /*Other function code*/
   }
});