Преобразование проверки состояния флажка из Materialize в Bootstrap 4

Мы только что перешли от использования Materialize к использованию Bootstrap 4, и, будучи абсолютным новичком в Bootstrap, я столкнулся с некоторыми сложностями, пытаясь заставить мою функцию, которая проверяет состояние некоторых флажков на одной из наших страниц, работать.

Вот мой старый код, который работал с Materialize:

HTML:

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

Я использую Meteor для перебора «relList» и создания флажка для каждого элемента, причем этот флажок имеет тот же идентификатор, что и текущий элемент.

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

Здесь я прослушиваю любые изменения флажков и нажимаю идентификатор любого флажка, который изменяется, в массивы notChecked и checked, в зависимости от того, был ли флажок установлен/снят.

Я сделал очевидное изменение классов флажка Materialize на классы Bootstrap, но по какой-то причине моя реализация jQuery, похоже, не работает с ним, независимо от того, что я делаю. Я не уверен, связана ли моя проблема с тем, как я преобразовал HTML, или мне нужно внести некоторые изменения в мой jQuery.

Если бы кто-нибудь мог предложить некоторые идеи о том, как изменить мой HTML/jQuery, чтобы он снова заработал, я был бы признателен.


checkbox html jquery twitter-bootstrap materialize
person user2498668    schedule 07.07.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы хотите отслеживать изменения, поэтому создайте функцию для вызова, которая хранит значения отмеченных/непроверенных массивов.

Затем вызовите их в функции :checkbox .change с помощью 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"));
});
person remixdesign    schedule 07.07.2016