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

可以在复选框更改事件触发时使用事件侦听器进行处理。然后，在单击复选框时将这些值添加到数组中。

// 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：我建议每个复选框使用不同的ID。 HTML ID应该是唯一的。

Answer 3

addEventListener知道哪个是更改。？

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

Answer 4

$('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>

从复选框列表中获取已更改的那些

4 个答案: