<input class="btn btn-default baths" name="baths" type="checkbox" value="1">1
<input class="btn btn-default baths" name="baths" type="checkbox" value="2">2
<input class="btn btn-default baths" name="baths" type="checkbox" value="3">3
<input class="btn btn-default baths" name="baths" type="checkbox" value="4">4
<input class="btn btn-default baths" name="baths" type="checkbox" value="5+">5
<br>
<input class="all_baths" type="text" value="">
$('.baths').on('change', function() {
var vals = [];
$('.baths:checked').each(function(){ //could also use .map here
vals.push($(this).val());
});
$('.all_baths').val(vals.join(','));
console.log($('.all_baths').val());
});
This Pen doesn't use any external CSS resources.