转换复选框状态检查从物化到引导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")); 
});