Из списка флажков получить те, которые были изменены

Question

Итак, у меня есть список флажков, например

<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056001">

<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056002">

<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056003">

Мне нужно проверить, какие флажки были изменены (проверено => Не проверено, не проверено => отмечено), и собрать эти значения.

Сейчас я остановился на этом:

var collectID = [];
    $.each($("input[class='inv_doc_ids[]']:checked"), function () {
                collectID.push($(this).val());
            });
            console.log(collectID);

Он собирает только те флажки, которые отмечены, и возвращает их значения в массиве => [01000290056001, 01000290056002, 01000290056003]

Что мне нужно добавить вЧтобы заставить его работать правильно?Мысль о том, чтобы добавить что-то вроде этого:

var show = $(this),
                    colllect = (input.attr("checked") || "") === "checked";
return (colllect !== input.attr("checked"));

Но не знаю, правильный ли это путь.

Answer 1

Вы можете выбрать те, которые имеют отмеченный атрибут, который не отмечен, и те, у кого нет отмеченного атрибута, который отмечен.

$('button').on('click', e => {
  console.log(
    $('input[checked]:not(:checked), input:not([checked]):checked')
    .map( ( _, it ) => [[ it.value, it.checked ? 1 : 0 ]] )
    .get()
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056001">
<input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056002">
<input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056003">
<br>
<input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056004">
<input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056005">
<input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056006">
<br>
<button>Check</button>

Answer 2

$('button').on('click', function() {
    var valuelist = [];
    $("input[type=checkbox]").each(function() {
        var dom_checked = $(this).attr('checked');
        var checked = $(this).prop('checked');
        if ((dom_checked === "checked" && checked === false) ||
      	    typeof dom_checked === "undefined" && checked === true) {
            valuelist.push(this.value);
        }  
    })
    console.log(valuelist);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056001">
<input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056002">
<input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056003">
<input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056004">
<input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056005">
<input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056006">
<button>Check</button>

Answer 3

addEventListener чтобы узнать, что изменится .?

document.querySelectorAll('input[type=checkbox]').forEach(function(item){
   item.addEventListener('change', function(){
      console.log(item.value); 
   })
})

Answer 4

Вы можете использовать обработчик событий для обработки, когда срабатывает событие изменения флажка.Затем добавьте эти значения в массив при установке флажка.

// array to hold modified checkbox values
var checkboxes = [];

// event listener on change
$('input[type=checkbox]').on('change', function(){
    checkboxes.push($(this).val());
});

// log values to console
$('#btn1').on('click', function(){ 
    console.log(checkboxes);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056001">

<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056002">

<input  class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056003">

<button id="btn1" >Show modified values</button>

PS: Я бы посоветовал иметь разные идентификаторы для каждого флажка.HTML идентификаторы должны быть уникальными.