A nice bootstrap jQuery Checkbox List-item with add control, demo: https://jsfiddle.net/1m38aha0/8/

app.js

(function () {
    $.fn.checkList = function (options) {
        var self = this,
            checkedItems = options.checkedItems ? options.checkedItems.slice() : [], //take a copy
            unCheckedItems = options.unCheckedItems ? options.unCheckedItems.slice() : [], //take a copy
            valuePath = options.valuePath,
            textPath = options.textPath;

        this.addClass('list-group');

        $.each(checkedItems, function (key, item) {
            self.append(createListItem(item, true, valuePath, textPath));
        });

        $.each(unCheckedItems, function (key, item) {
            self.append(createListItem(item, false, valuePath, textPath));
        });

        this.addItem = function (item, isChecked) {
            if (isChecked) {
                checkedItems.push(item);
            } else {
                unCheckedItems.push(item);
            }
            self.append(createListItem(item, isChecked, valuePath, textPath));
        };
        this.getCheckedItems=function(){
            return checkedItems;
        };
        this.getUncheckedItems=function(){
            return unCheckedItems;
        };
        this.getCheckedCheckboxes=function(){
            return self.find('input:checkbox:checked');
        }
        this.getUnCheckedCheckboxes=function(){
            return self.find('input:checkbox:not(checked)');
        }
        return this;
            
        function createListItem(item, isChecked, valuePath, textPath) {
        	return $(
                '<li class="list-group-item ' + (isChecked ? 'active' : '') + '">' +
                '	<label>' +
                '		<input type="checkbox" ' + (isChecked ? 'checked="checked" ' : '') +
                'value="' + item[valuePath] + '" ' +
                '		/> ' + item[textPath] +
                '	</label>' +
                '</li>')
                .change(function () {
                	var $el = $(this).closest('li').toggleClass('active'),
                        item = $el.data('item');
                	
                	if(!$el.prop('checked')){
                		unCheckedItems.splice(unCheckedItems.indexOf(item), 1);
                        checkedItems.push(item);
                    }else{
                        checkedItems.splice(checkedItems.indexOf(item), 1);
                        unCheckedItems.push(item);
                    }   
            }).data('item', item);
        }
    }

    $.fn.checkListWithAddControl = function (options) {
        var ul, input;

        this.html(
            '<ul></ul>' +
            '<div class="input-group">' +
            '	<input type="text" class="form-control" placeholder="Add item">' +
            '	<span class="input-group-btn">' +
            '		<button class="btn btn-default" type="button">' +
            '			<i class="glyphicon glyphicon-plus"></i>' +
            '		</button>' +
            '	</span>' +
            '</div>');

        input = this.find('input');

        ul = this.find('ul').checkList(options);

        input.keypress(function (e) {
            var code = e.keyCode || e.which
            if (code == 13) {
                onAdd();
                e.preventDefault();
                return false;
            }
        });
        this.find('button').click(onAdd);

        function onAdd() {
            var value = input.val();
            if (value && options.onAdd) {
                options.onAdd(value, ul.addItem); //checkList.addItem
            }
            input.val('');
        }
        this.getCheckedItems = ul.getCheckedItems;
        this.getUnCheckedItems = ul.getUncheckedItems;
        this.getCheckedCheckboxes = ul.getCheckedCheckboxes;
        this.getUnCheckedCheckboxes = ul.getUnCheckedCheckboxes;
        return this;
    }
})();
$(function () {
    var form = $('form'),
        control = form.find('.control'),
        pre1 = $($('pre')[0]),
        pre2 = $($('pre')[1]),
        options = {
            checkedItems: [{
                text: 'item 1',
                value: 1
            }, {
                text: 'item 2',
                value: 2
            }, {
                text: 'item 3',
                value: 3
            }, {
                text: 'item 4',
                value: 4
            }, {
                text: 'item 5',
                value: 5
            }],
            unCheckedItems: [{
                text: 'item 6',
                value: 6
            }, {
                text: 'item 7',
                value: 7
            }, {
                text: 'item 8',
                value: 8
            }, {
                text: 'item 9',
                value: 9
            }, {
                text: 'item 10',
                value: 10
            }],
            valuePath: 'value',
            textPath: 'text',
            onAdd: function (value, addItemCb) {
                //do api call and in callback call the addItemCallback
                addItemCb({
                    text: value,
                    value: value
                }, true);
            }
        };
    control.checkListWithAddControl(options);
    form.submit(function(e){
        e.preventDefault();
        
        pre1.text(JSON.stringify(control.getCheckedItems()));
        var items = [];
        $.each(control.getCheckedCheckboxes(),function(key, checkbox){
            items.push($(checkbox).closest('li').data('item'));
        });
        pre2.text(JSON.stringify(items));
    });
});

index.html

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Checkbox List-item with add control</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
      <form>
          <div class="form-group">
              <div class="control"></div>
          </div>
          <div class="form-group">
              <input class="btn btn-primary" type="submit" value="save" />
          </div>
      </form>
      <pre></pre>
      <pre></pre>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="app.js"></script>
</body>
</html>