如何改进jquery复选框脚本

Question

我做了一个功能，如果我选中一个复选框，一个文本将被添加到文本区。我有几个复选框，所以当我取消选中任何一个复选框时，我不希望文本区为空。我的代码工作，但问题是代码真的很糟糕的编码，并使加载时间太长，因为这是一个移动网站，我需要缩短它，任何帮助是感激的。

$(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, ""));
        }
    });
});

谢谢!

Answer 1

你可以试试这个。

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

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
});

你只需要像程序员一样思考，看看每件事都有什么共同点。

Answer 3

有很多缩小工具可用，我倾向于使用谷歌的闭包编译器。这是一个在线版本的link，你可以尝试一下。