轉換複選框狀態檢查從物化到引導4

Question

我們剛剛從使用Materialize轉移到使用Bootstrap 4，並且作爲Bootstrap總新手，我遇到了一些併發症，讓我的函數檢查一些狀態我們的其中一個網頁上的複選框可以正常工作。

這裏是我的舊代碼，與Materialise的工作：

HTML：

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

我使用流星通過「relList」迭代，併爲每個項目一個複選框，與具有複選框與當前元素相同的id。

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

在這裏，我聽的任何變化複選框，推動其改變成陣列的任何複選框的ID notChecked和檢查，根據包裝盒上是否被選中/取消。

我已經完成了將Materialise複選框類更改爲Bootstrap類的明顯做法，但由於某種原因，無論我做什麼，我的jQuery實現似乎都無法使用它。我不確定我的問題是如何通過HTML轉換的，或者是否需要對我的jQuery進行一些更改。

如果任何人都可以提供一些見解，如何改變我的HTML/jQuery再次得到這個工作，我將不勝感激。

Answer 1

您想跟蹤更改，因此創建一個調用函數來存儲選中/未選中數組的值。

然後調用它們：複選框。使用jquery更改函數..數組將保持最新的那種方式。

我收錄了一些按鈕，向您展示數組與每次更改保持一致。

小提琴： 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")); 
});