使用 Jquery 如何在单击按钮时调用的函数中获取动态生成的复选框检查状态

Question

使用 jquery，从 ajax 调用中出来，我有一个生成复选框的“每个”语句。这是在我的脚本中实际执行生成和追加的行。

$('<input />', { type: 'checkbox', id: value.rental_accessories_id, value: value.partnumber, class: 'accessories' }).appendTo($('#form_container');

单击一个按钮，我正在主 HTML 代码中执行一个函数。

<button type="button" onclick="calculate()" id="calc">CALCULATE</button>

在函数内部，所以回到脚本中，我需要知道这些复选框是否已被选中。我可以使用此代码获取元素并验证它们是否存在，但无法获得检查状态：

    function calculate() {
$('#form_container input, #form_container select').each(
                function(index){  
                    var input = $(this);
                    console.log('Id:' + input.attr('id'));
                    console.log('Type: ' + input.attr('type'));
                    console.log('Name: ' + input.attr('name'));
                    console.log('Value: ' + input.val());
                    console.log($('#' + input.attr('id')).checked);
                    if(input.attr('type') == 'checkbox')
                    {
                        checked_status = input.parent().find('input[name="'+input.attr('name')+'"]:checked').val();
                        console.log('Checked Status' + checked_status);
                    }
                }
            );
}

id、类型、名称和值是通过 find 来的。但是我在检查状态请求中得到一个“未定义”。我尝试了两种不同的方法，但它们都返回未定义。我正在创建其他几个表单字段类型，这就是我寻找输入和选择的原因。除了复选框是否被选中之外，我可以找到我正在寻找的所有其他内容。

我已经在这个网站上进行了一些挖掘以寻找答案。您可能会认为上面的一些代码来自其他类似问题的建议。我不是 jquery 方面的专家，但很多建议都提到了使用 .on，但是这些示例似乎不适用于我正在做的事情，或者如果它们确实适用，我不确定如何为这个特定设置实现它们.

Answer 1

JsFiddle : https://jsfiddle.net/sbn9pf6r/

checkbox.js

var arr = ['A', 'B', 'C'];

for (var i = 0; i < arr.length; i++) {
    $('<input />', {
        type : 'checkbox',
        id: 'id' + i,
        name: 'name' + arr[i],
        value: arr[i],
        class: 'chk'
    })
    .appendTo("#someId"); 
}

$("#buttonClass").on("click", function() {
  var checkedIds = $(".chk").map(function() {
    return { value: this.value, checked: this.checked};
  }).toArray();
  console.log(checkedIds);
});

checkbox.html

<div id="someId"></div>
<button id="buttonClass">get Data</button>