Use value property to hold data that you would like to associate with the checkbox and do not use it to toggle true and false. Whether checkbox is checked or not, you can know from the checked property.

A piece of advice, most probably, you’ll NOT want to use checkbox label same as value because values are for internal purpose, for any data manipulation, and labels have sole purpose of display in the UI.

Please try the following solution direction:

$('.checkboxes input').on('change', (event) => {
  const checked = $(event.target).prop('checked')
  const value = $(event.target).prop('value')
  console.log(checked, ':', value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes">
  <input type="checkbox" id="checkbox1-id" value="checkbox-1" /><label for="checkbox1-id">Checkbox 1</label>
  <input type="checkbox" id="checkbox2-id" value="checkbox-2" /><label for="checkbox2-id">Checkbox 2</label>
  <input type="checkbox" id="checkbox3-id" value="checkbox-3" /><label for="checkbox3-id">Checkbox 3</label>  
</div>

     view.$el.find('div.checkboxes input').change(function (event) {

             var id = $(event.target).attr('data-id');

             if ($(event.target).prop('checked')) {

                 resultSetParameters.get('filter').coachProperties.push(id);

                 resultSetParameters.trigger('change');

             } else {

                 var index = resultSetParameters.get('filter').coachProperties.indexOf(id);

                 if (index > -1) {

                     resultSetParameters.get('filter').coachProperties.splice(index, 1);

                     resultSetParameters.trigger('change');

                 }

             }

            });

I am dynamically printing out checkboxes depending on list from database, called in the code ‘coachProperties’. Each coachProperty will get their own checkbox appended with the text which is unique.
I want to add this to another object ‘properties’. Something like ‘properties{text1 : “false, text2 : “true”} to then later on take it to server-side to do some filtering. I dont want any sumbit button since i want it to dynimcally update which i have js code for. All values in ‘properties’ will start with “false” which should update when checkbox is clicked. The problem is, sometimes when I uncheck a box it still displays as true and vice versa.

    <div data-id="coachPropertiesCheckbox">
                <% coachProperties.get('coachProperties').forEach(function (coachProperty) { %>
                    <div class="checkboxes">
                        <label>
                        <input type="checkbox" data-id="test" value="<%= coachProperty.text %>"> <%= coachProperty.text %>
                        </label>
                        </label>
                    </div>
                <% }); %>
            </div>

Js code:

function setProp(obj,prop,value){

            obj[prop] = value;

            };


            var properties = {};

            coachProperties.get('coachProperties').forEach(function (coachProperty) {

            properties[coachProperty.text] = "false";

            
         });


 view.$el.find('[data-id="coachPropertiesCheckbox"] div.checkboxes input').change(function () {


            var isCheckboxedChecked = view.$el.find('[data-id="test"]').is(':checked');

            var valueCheckbox = $(this).attr("value");



            setProp(properties, valueCheckbox, isCheckboxedChecked );



            $.each( properties, function( key, value ) {

                console.log( key + ": " + value );


                });

            });