如何在页面加载时从使用 jquery 动态生成的复选框组中检索值

Question

我需要获取 2 组复选框的选中复选框的值。这 2 个组不在 html 文件中，但它们是在页面加载时使用 jquery 生成的。我需要 2 个函数 getSubjects() 和 getDates() 来返回相关复选框组的值。

我用来生成它们的 HTML 和 JS：

function loadAvailable() {
    $.ajax({
            url: "Controller",
            type: "POST",
            data: {action: "load"},
            dataType: "json",
            success: function (result) {
                $("#listAvailable").html("");
                var courses = getCourses(result);
                
                if(courses.length == 0){
                    var sorry = "Some text.";
                    $("#listAvailable").text(sorry);
                }
                $("#subjects").html("");
                addDates(result);
                var len = courses.length;
                for(var i=0; i<len; i++){
                    var course = courses[i];
                    addCourseCheckbox(course, "#subjects");
                   //other stuff
               }
            },
            error: function (xhr, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
}

function addDates(data){
    $("#days").html("");
    var res = new Array();
    var i;
    var len = data.length;
    for(i=0; i<len; i++){
        var date = data[i].date;
        if(!res.includes(date)){
            res.push(date);
            var d = new Date();
            d.setTime(date);
            addDateCheckbox(d);
        }
    }
}

function addCourseCheckbox(course) {
   var container = $("#subjects");
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', 
                    id: 'ccb'+id, 
                    name: 'subject',
                    value: course, 
                    class: 'checkSub'}).appendTo(container);
   $('<label />', { 'for': 'ccb'+id,
                     text: course }).appendTo(container);
}
//                   
function addDateCheckbox(data) {
    var container = $("#days");
    var inputs = container.find('input');
    var id = inputs.length+1;
    $('<input />', { type: 'checkbox', 
                     id: 'dcb'+id, 
                     name: 'date',
                     value: data.getTime(), 
                     class: 'checkDay' }).appendTo(container);
    $('<label />', { 'for': 'dcb'+id,
                     text: shortDate(data)}).appendTo(container);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id="filter">
            Filtra le disponibili&agrave;:<br>
            Data<br>
            <div class="filter" id="days"></div>
            Materia<br>
            <div class="filter" id="subjects"></div>
            <button onclick="filterAvailable()">Filtra</button>
        </aside>

我在 Vanilla JS 中试过这样：

function getSubjects() {
    var x = new Array();
   [].forEach.call(document.querySelectorAll('input[name="subject"]:checked'), function(cb) {
   x.push(cb.value); 
});
    return x;
}

我也试过这个：

var x = new Array();
$('input[name="subject"]:checked').each(function() {
   x.push(this.value);
});
return x;

还有这个其他版本：

var x = $('input[name="subject"]:checked').serialize();
return x;

但似乎没有任何效果。

附：我在这里使用getSubjects() 作为示例，而不是两者，因为它们是平等的。

提前感谢您的帮助。

Answer 1

你说得对，只是 this.value 应该是 $(this).val() 因为你正在循环遍历 JQuery 版本的元素；

代码如下：

function getData(groupName){
    var x = new Array();
    $('input[name="'+ groupName +'"]:checked').each(function() {
       x.push($(this).val());
    });
    return x;
}

叫它....

getData('subject');
getData('date');