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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js