Converting Checkbox Status Check from Materialize to Bootstrap 4

Question

We just moved over from using Materialize to using Bootstrap 4, and, being a total novice with Bootstrap, I've run into some complications with getting my function that checks the status of some checkboxes on one of our pages to work.

Here's my old code that worked with Materialize:

HTML:

{{#each relList}}
   <div>
     <input type="checkbox" id="{{this.eguid}}">
     <label for="{{this.eguid}}">{{this.cluster_value}}</label>
   </div>
{{/each}}

I'm using Meteor to iterate through "relList" and create a checkbox for each item in, with that checkbox having the same id as the current element.

jQuery:

$(document).ready(function () {
    //getting eguid on checkbox change
    $(":checkbox").change(function () {
        var notChecked = [], checked = [];
        $(":checkbox").map(function () {

            this.checked ? checked.push(this.id) : notChecked.push(this.id);
        });
        getDetails(checked);
    });
})

Here I'm listening for any changes to checkboxes and pushing the id of any checkbox that is changed into the arrays notChecked and checked, depending on whether the box was checked/unchecked.

I've done of the obvious of changing over the Materialize checkbox classes to Bootstrap ones, but for some reason my jQuery implementation doesn't seem to work with it no matter what I do. I'm not sure if my issue is with how I've converted over the HTML or if I need to make some changes to my jQuery.

If anyone could offer some insights into how to change my HTML/jQuery to get this working again, I would appreciate it.

Answer 1

You want to keep track of the changes so create a function to call that stores the values of the checked / unchecked arrays.

Then call them on :checkbox .change function with jquery.. the arrays will be kept up to date that way.

I included buttons to show you the array is kept up to date with each change.

Fiddle: https://jsfiddle.net/remix1201/c6nxrwoq/

HTML:

<input type="checkbox" class="checkItems" value="1" checked="checked" />
<input type="checkbox" class="checkItems" value="2" />
<input type="checkbox" class="checkItems" value="3" />
<input type="checkbox" class="checkItems" value="4" />
<input type="checkbox" class="checkItems" value="5" />
<input type="checkbox" class="checkItems" value="6" />
<input type="checkbox" class="checkItems" value="7" />
<input type="checkbox" class="checkItems" value="8" />

<button id="chk1">checked</button>
<button id="chk2">not checked</button>

JS:

function boxChange(type){
    var checkedValues = $('input:checkbox:checked.checkItems').map(function() { return this.value; }).get();
    var uncheckedValues = $('input:checkbox:not(:checked).checkItems').map(function() { return this.value; }).get();

  if(type == "not"){
        return uncheckedValues;
    } else {
        return checkedValues
    }
}

$(":checkbox").change(function() {
    boxChange();
    boxChange("not");
});

// Only Needed For Buttons

$("body").on("click", "button#chk1", function() {
    alert (boxChange());
});

$("body").on("click", "button#chk2", function() {
    alert (boxChange("not"));
});