How to improve my jquery checkbox script

Question

I have made a function that if i check a checkbox an text will be added to an textarea. I have several checkboxes, so i dont want the textarea to get empty when i uncheck any of the checkboxes. my code works, but the problem is the code is really awfully coded and makes loading time too long since this is for a mobile site i need to shorten it, any help is appreciated.

$(document).ready(function () {
    $('#checkbox-6').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Till - Hiss finnes ')
        } else {
            var thiss = $('#append');
            thiss.html(thiss.html().replace(/ Till - Hiss finnes /ig, ""));
        }
    });
    $('#checkbox-7').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Behöver hjälp med uppackning ')
        } else {
            var upack = $('#append');
            upack.html(upack.html().replace(/ Behöver hjälp med uppackning /ig, ""));
        }
    });
    $('#ch1').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Från - Hiss finnes ')
        } else {
            var fhiss = $('#append');
            fhiss.html(fhiss.html().replace(/ Från - Hiss finnes /ig, ""));
        }
    });
    $('#ch2').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Packning ')
        } else {
            var pack = $('#append');
            pack.html(pack.html().replace(/ Packning /ig, ""));
        }
    });
    $('#ch3').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Vind Källare Förråd ')
        } else {
            var attic = $('#append');
            attic.html(attic.html().replace(/ Vind Källare Förråd /ig, ""));
        }
    });
    $('#ch4').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Flyttstädning ')
        } else {
            cleaning = $('#append');
            cleaning.html(cleaning.html().replace(/ Flyttstädning /ig, ""));
        }
    });
    $('#ch5').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Behöver flyttkartonger ')
        } else {
            var boxes = $('#append');
            boxes.html(boxes.html().replace(/ Behöver flyttkartonger /ig, ""));
        }
    });
});

Thanks!

Answer 1

You can try this.

var texts = {
   "ch1": " Från - Hiss finnes ",
   "ch2": " Packning ",
   "ch3": " Vind Källare Förråd ",
   "ch4": " Flyttstädning ", 
   "ch5": " Behöver flyttkartonger ", 
   "checkbox-6": " Till - Hiss finnes ",
   "checkbox-7": " Behöver hjälp med uppackning ",
}

$(document).ready(function(){
   $(':checkbox').change(function(){
      var $textArea = $('#append');
      if(this.checked){
          $textArea.append(texts[this.id])
      }else{
           $textArea.html($textArea.html().replace(texts[this.id], ""));
      }
    });
});

Answer 2

There are many minification tools available, I tend to use Google's Closure Compiler. Here's a link to an online version which you can play around with.

Answer 3

function min(id, append, unpack)
{
    $(id).change(function() {
        if ($(this).is(':checked')) {
            $('#append').append(append)
        } else {
            var thiss = $('#append');
            thiss.html(thiss.html().replace(unpack, ""));
        }
    });
}

$(document).ready(function() {
    min('#checkbox-6', ' Till - Hiss finnes ', / Till - Hiss finnes /ig);
    min('#checkbox-7', ' Behöver hjälp med uppackning ', / Behöver hjälp med uppackning /ig);
    // ETC
});

You just need to think like a programmer and see what everything has in common.