Wrote such code

$("#workDesign label").on("click", function() { var input = $(this).children("input"); var tag = $(this).text(); if (input.prop("checked")) { input.parent().addClass("selected"); alert(tag); $("#workDesignTags").val(tag); } else { input.parent().removeClass("selected"); } }); var tagList; 
 <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"> <label> <input type="checkbox" name="design" value="Value 1"><span class="textBox">Value 1</span> </label> <label> <input type="checkbox" name="design" value="Value 2"><span class="textBox">Value 2</span> </label> <label> <input type="checkbox" name="design" value="Value 3"><span class="textBox">Value 3</span> </label> <label> <input type="checkbox" name="design" value="Value 4"><span class="textBox">Value 4</span> </label> </div>

How to make, what value would be added, but did not replace with itself old? How to make, what value would be removed from all value if checkbox is removed? In my layout, I just change the values ​​in input.

    2 answers 2

    You can keep all values ​​in an array. Programmatically draw input. In the array to hold the state - the indices of the selected values. For each change, redraw the value of the text field.

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

      Not the best solution, but it works on your example.

       var inputText = ""; $("#workDesign label").on("click", function() { var input = $(this).children("input"); var tag = $(this).text(); if (input.prop("checked")) { inputText += tag; input.parent().addClass("selected"); alert(tag); $("#workDesignTags").val(inputText); } else { inputText = inputText.replace(tag, ""); $("#workDesignTags").val(inputText); input.parent().removeClass("selected"); } });

      https://jsfiddle.net/xpnh756p/