What you need is this
return $(this).next('label').text();
You have two problems
1) your oncheck
event should be outside the on-change event
2) your label lives outside checkbox so if you want to get text of it you need to get by using next
or closest
.
document.getElementById('field1').onchange = function() { var boxes = document.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < boxes.length; i++) { boxes[i].checked = boxes[i].value == this.value; document.getElementById("field3").value = this.value; }}; $(":checkbox").on('change', function() { var string = $(":checkbox").filter(":checked").map(function(i, v) { return $(this).next('label').text(); }).get().join(" ,"); $('#field_results').val(string); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name='field1' id="field1"><option value="1">Fruits</option><option value="2">Vegetables</option><option value="3">Sweets</option><option value="4">Meat</option></select><div id='changer'><input type='checkbox' id='a' value="3" /><label>A</label><br /><input type='checkbox' id='b' value="3" /><label>B</label><br /><input type='checkbox' id='c' value="3" /><label>C</label><br /><input type='checkbox' id='d' value="3" /><label>D</label></div><input type="text" id="field_results" /><br><select name='field3' id="field3"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>