Solution 1 :

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 = $('checked')
  const value = $('value')
  console.log(checked, ':', value)
<script src=""></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>  

Solution 2 :

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

             var id = $('data-id');

             if ($('checked')) {



             } else {

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

                 if (index > -1) {

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





Problem :

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">
                        <input type="checkbox" data-id="test" value="<%= coachProperty.text %>"> <%= coachProperty.text %>
                <% }); %>

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




Comment posted by SebasJun

Hmm the first line: $(‘.checkboxes input’).on(‘change’, (event) => { returns this error message in the browser: Uncaught SyntaxError: missing ) after argument list

Comment posted by Ritesh Jagga

Could that be a browser cache issue? It is working fine at my end in Chrome and Firefox.

Comment posted by SebasJun

Not likely, i always clear cache during web-development. Not sure where it comes from