将复选框状态检查从 Materialise 转换为 Bootstrap 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}}

我正在使用 Meteor 遍历 "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 和 checked，具体取决于复选框是否 checked/unchecked。

我已经完成了将 Materialize 复选框类更改为 Bootstrap 的明显操作，但出于某种原因，我的 jQuery 实现似乎无法使用它不管我做什么。我不确定我的问题是否出在 HTML 上的转换方式，或者我是否需要对 jQuery.

进行一些更改

如果有人可以提供一些关于如何更改我的 HTML/jQuery 以使其再次运行的见解，我将不胜感激。

Answer 1

您想跟踪更改，因此创建一个要调用的函数来存储选中/未选中数组的值。

然后使用 jquery 在 :checkbox .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"));
});

将复选框状态检查从 Materialise 转换为 Bootstrap 4

Converting Checkbox Status Check from Materialize to Bootstrap 4

html

checkbox

jquery

materialize

twitter-bootstrap