Аналогичный вопрос и
ответ:
var tags = [
"Value 0",
"Value 1",
"Value 2",
"Value 3",
]
,selected = []
,$in = $('#workDesignTags')
;
render();
$("#workDesignLabels input").on("change", clickHandle);
function render() {
var i, v, items=[];
for(i=0;i<tags.length; i++) {
v = tags[i];
items.push( $('<label>').append( $('<input>', {
type:"checkbox",
name:"design",
value: i,
})).append( v)
);
};
$('#workDesignLabels').append(items);
}
function clickHandle() {
var i, k = $(this).val(), result = [];
if( !!~(i = selected.indexOf(k))) {
selected.splice( i, 1);
} else {
selected.push(k);
}
for(i=0;i<selected.length;i++) result.push( tags[ selected[i]]);
$in.val( result.join(', '));
};
HTML:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<div id="workDesignLabels"></div>
</div>
