Q:

.load content when checkbox checked, remove when unchecked

I have a number of checkboxes which, when checked invoke the below script to show a chunk of html inside a form using .load:
$('input.article').click(function(){
        var bits = $(this).attr('id').split('_');
        var id = bits[1];
        var article = 'article_' + id + '.html';
        $('#form_' + id).load('<?php echo base_url(); ?>assets/html/' + article);
        $('#form_' + id).toggle();
        $('.submit').show();
    });

The forms are dynamically created in the view like so:
<?php for($i = 1; $i <= 8; $i++){ ?>
        <div id="form_<?php echo $i; ?>" class="hide">
       </div>
<?php } ?>

However, I need the loaded html to be removed whenever the checkbox is unchecked, and that's where I get stuck. Using .toggle()the html is hidden, but it is being submitted anyway. Any idea how to achieve this?

A:

Try this -
$('input.article').click(function(){
        var bits = $(this).attr('id').split('_');
        var id = bits[1];
        var article = 'article_' + id + '.html';
        if(this.checked){
          $('#form_' + id).load('<?php echo base_url(); ?>assets/html/' + product);
        }
        else{
          $('#form_' + id).empty();  
        }
        $('.submit').show();
});

