Question

我在数组中填充表中的行。每行都有一个复选框，我希望根据特定条件对其进行检查。

因此，在填充每一行后，我试图选中该复选框，但使用此功能似乎无法检查它：

if(invoices[i].paid == 'yes'){
    $('.filterPaid').prop('checked', false);
}else{
    $('.filterPaid').prop('checked', true);
}

这是代码：

var invoices = {% raw json_encode(invoices) %};
//console.log(invoices);
var addRow = '';
for(var i = 0; i < invoices.length; i++){
    //alert(invoices[i].invoiceDueYear);

    var date = new Date(invoices[i].invoiceDueYear,invoices[i].invoiceDueMonth,invoices[i].invoiceDueDay);
    var d = date.getDate();
    var month = new Array();
    month[0] = "Jan";
    month[1] = "Feb";
    month[2] = "Mar";
    month[3] = "Apr";
    month[4] = "May";
    month[5] = "Jun";
    month[6] = "Jul";
    month[7] = "Aug";
    month[8] = "Sep";
    month[9] = "Oct";
    month[10] = "Nov";
    month[11] = "Dec";
    var m = month[date.getMonth()]; 

    var y = date.getFullYear();

    var inv = pad(invoices[i].invoiceNo,9,3);

    if(invoices[i].currency === 'GB'){
        var currency = '&#163;';
    }else if(invoices[i].currency === 'US'){
        var currency = '&#36;';
    }else{
        var currency = '&#8364;';
    }

    addRow += '<tr><td><input type="checkbox" class="filterPaid" id="invPaid'+i+'" value="outstanding" name="filterTasks[]"></td><td class="invoiceView" value="'+invoices[i].uid+'"><a href="#">' + inv + '</a></td><td>' + invoices[i].creditorName + '</td><td>' + currency + '' + invoices[i].balance + '</td><td>' + d + ' '+ m +' '+y+'</td></tr>';

    if(invoices[i].paid == 'yes'){
        $('.filterPaid').prop('checked', false);
    }else{
        $('.filterPaid').prop('checked', true);
    }
}
$('#invoiceTable tr').first().after(addRow);

为什么不检查此实例中的复选框？

Answer 1

在您的代码中，当您尝试使用jQuery设置checkboxes checked属性时，复选框只是一个字符串。循环外$('#invoiceTable tr').first().after(addRow);将HTML字符串插入DOM。从那一刻起，字符串被解析为HTML，您可以使用代码在它们上设置属性。我的建议是将checked属性插入到你正在构建的html字符串中。

addRow += '<tr><td><input type="checkbox" class="filterPaid" id="invPaid'+i+'" value="outstanding" name="filterTasks[]"></td><td class="invoiceView" value="'+invoices[i].uid+'"><a href="#">' + inv + '</a></td><td>' + invoices[i].creditorName + '</td><td>' + currency + '' + invoices[i].balance + '</td><td>' + d + ' '+ m +' '+y+'</td></tr>';

if(invoices[i].paid == 'yes'){
    $('.filterPaid').prop('checked', false);
}else{
    $('.filterPaid').prop('checked', true);

更改为

var attr = "";
if(invoices[i].paid == 'yes'){
     attr = "checked";
}

addRow += '<tr><td><input '+attr+' type="checkbox" class="filterPaid" id="invPaid'+i+'" value="outstanding" name="filterTasks[]"></td><td class="invoiceView" value="'+invoices[i].uid+'"><a href="#">' + inv + '</a></td><td>' + invoices[i].creditorName + '</td><td>' + currency + '' + invoices[i].balance + '</td><td>' + d + ' '+ m +' '+y+'</td></tr>';

JQuery - 检查表中的复选框

1 个答案: