Checkbox Status Check von Materialize zu Bootstrap 4

Question

Wir sind gerade von der Verwendung von Materialize zu Bootstrap 4 übergegangen, und da ich ein absoluter Anfänger mit Bootstrap bin, habe ich einige Komplikationen mit meiner Funktion bekommen, die den Status einiger überprüft Checkboxen auf einer unserer Seiten zu arbeiten.

Hier ist mein alter Code, der mit Materialise gearbeitet:

HTML:

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

ich Meteor bin mit durch "relList" zu durchlaufen und ein Kontrollkästchen für jedes Element in erstellen mit, dass Checkbox mit die gleiche ID wie das aktuelle 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); 
    }); 
}) 

Hier habe ich für alle Änderungen an Kontrollkästchen hören bin und die ID eines Kontrollkästchen schieben, die in die Felder geändert wird notChecked und geprüft, je nachdem, ob die Box wurde aktiviert/deaktiviert.

Ich habe von der offensichtlich der Umstellung der Materialize Checkbox-Klassen auf Bootstrap diejenigen getan, aber aus irgendeinem Grund scheint meine jQuery-Implementierung damit nicht zu arbeiten, egal was ich mache. Ich bin mir nicht sicher, ob mein Problem darin besteht, wie ich den HTML-Code konvertiert habe oder ob ich einige Änderungen an meinem jQuery vornehmen muss.

Wenn jemand einige Einblicke geben könnte, wie man meine HTML/jQuery ändert, um das wieder zum Laufen zu bringen, würde ich es begrüßen.

Answer 1

Sie möchten die Änderungen im Auge behalten, also erstellen Sie eine aufzurufende Funktion, die die Werte der aktivierten/ungeprüften Arrays speichert.

Dann rufen sie auf: Checkbox .change-Funktion mit jquery .. die Arrays werden so auf dem neuesten Stand gehalten.

Ich habe Schaltflächen hinzugefügt, um Ihnen zu zeigen, dass das Array mit jeder Änderung auf dem neuesten Stand gehalten wird.

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