Jquery page content reload using class on button

I am using a button which has a class that changes depending on what position it's in. Meaning if the button is on, class will equal "button on", if it's off, class="button off"

By default the b开发者_如何学编程utton will be on, and so a certain type of information will be loaded from the database, but if someone clicks it off, I would like load another type of information from the database. I don't know how to make the class change trigger information loading. I don't want the whole page to reload just the contents on it, and I don't know how! It is possible with jQuery, or should I be doing something else.

I am using the script found on this site for the button :http://www.webstuffshare.com/2010/03/stylize-your-own-checkboxes/

---

to get some data without page reload you could use jquery.ajax() function:

$.ajax({
  url: "test.html",
  success: function(data){
    $("#some_id").html(data); 
    //or make whatever manipulations you want
  }
});

If question about triggering remains please specify how do you change the class.

Ok.

if(jQuery(this)[0].checked == true) { 
  jQuery(this).after('<div class="'+ setClass +' on" rel="'+ thisID +'">&nbsp;</div>');
  //here the request for one data
  $.ajax({
    url: "one url",
    success: function(data){
      $("#some_id").html(data); 
    }
  });
}
else {
  jQuery(this).after('<div class="'+ setClass +' off" rel="'+ thisID +'">&nbsp;</div>'); 
  //and here - for another
  $.ajax({
    url: "another url",
    success: function(data){
      $("#some_id").html(data); 
    }
  });

}