javascript - 取消选中复选框后，jQuery 为值显示“未定义”

Question

我是 jQuery 和 AJAX 的新手，我试图设置一个脚本来显示可以更新的 MySQL 表。我包括一个复选框来同时更新各种条目。它工作正常，但如果我取消选中该复选框，所有值都会更改为“未定义”。

这是我的代码：

$(document).ready(function(){  

function fetch_data()
{
    $.ajax({
        url:"select.php",
        method:"POST",
        dataType:"json",
        success:function(data)
        {
            var html = '';

            for(var count = 0; count < data.length; count++)
            {
                var bezahlstatus = data[count].bezahlstatus;
                var guest_amount = data[count].guest_amount;

                html += '<tr>';
                html += '<td><input type="checkbox" id="'+data[count].id+'" data-email="'+data[count].email+'" data-guest_amount="'+data[count].guest_amount+'" data-date_reservation="'+data[count].date_reservation+'" data-menu_own="'+data[count].menu_own+'" data-bezahlstatus="'+data[count].bezahlstatus+'" class="check_box"></td>';
                html += '<td>'+data[count].email+'</td>';
                html += (guest_amount == "") ? "<td>0</td>" : "<td>"+guest_amount+"</td>";
                html += '<td>'+data[count].date_reservation+'</td>';
                html += '<td>'+data[count].menu_own+'</td>';
                html += (bezahlstatus == null || bezahlstatus == "") ? "<td>nicht bezahlt</td>" : "<td>"+data[count].bezahlstatus+"</td>";

            }

            $('tbody').html(html);
        }
    });
}

fetch_data();


$(document).on('click', '.check_box', function() {
    var html = '';

var guest_amount = $(this).data('guest_amount');
var bezahlstatus = $(this).data('bezahlstatus');

if(this.checked)
{
    html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-email="'+$(this).attr('email')+'" data-guest_amount="'+$(this).attr('guest_amount')+'" data-date_reservation="'+$(this).attr('date_reservation')+'" data-menu_own="'+$(this).attr('menu_own')+'" data-bezahlstatus="'+$(this).attr('bezahlstatus')+'" class="check_box" checked></td>';
    html += '<td><input type="text" name="email[]" class="form-control" value="'+$(this).data("email")+'" /></td>';
    html += (guest_amount == "") ? '<td>0</td>' : '<td>'+guest_amount+'</td>';
    html += '<td>'+$(this).data('date_reservation')+'</td>';
    html += '<td><select name="menu_own[]" id="menu_own_'+$(this).attr('id')+'" class="form-control"><option value="Hauptmenü 1">Hauptmenü 1</option><option value="Hauptmenü 2">Hauptmenü 2</option><option value="Hauptmenü 3">Hauptmenü 3</option></select></td>';
    html += '<td><select name="bezahlstatus[]" id="bezahlstatus_'+$(this).attr('id')+'" class="form-control"><option value="">nicht bezahlt</option><option value="bezahlt">bezahlt</option></select></td><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" />';
}

else
{
    html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-email="'+$(this).attr('email')+'" data-guest_amount="'+$(this).attr('guest_amount')+'" data-date_reservation="'+$(this).attr('date_reservation')+'" data-menu_own="'+$(this).attr('menu_own')+'" data-bezahlstatus="'+$(this).attr('bezahlstatus')+'" class="check_box"></td>';
    html += '<td>'+$(this).data('email')+'</td>';
    html += (guest_amount == "") ? '<td>0</td>' : '<td>'+guest_amount+'</td>';
    html += '<td>'+$(this).data('date_reservation')+'</td>';
    html += '<td>'+$(this).data('menu_own')+'</td>'; 
    html += (bezahlstatus == null || bezahlstatus == "") ? '<td>nicht bezahlt</td>' : 

'<td>'+bezahlstatus+'</td>'; 
    }

$(this).closest('tr').html(html);

$('#menu_own_'+$(this).attr('id')+'').val($(this).data('menu_own'));

$('#bezahlstatus_'+$(this).attr('id')+'').val($(this).data('bezahlstatus'));

});

$('#update_form').on('submit', function(event){
    event.preventDefault();
    if($('.check_box:checked').length > 0)
    {
        $.ajax({
            url:"update.php",
            method:"POST",
            data:$(this).serialize(),
            success:function()
            {
                alert('Der Eintrag wurde erfolgreich aktualisiert.');
                fetch_data();
            }
        });
    }
});

});  

我试图在选中复选框的代码部分中找到错误，但我找不到它。有人可以帮我吗？

先感谢您！

标签： javascriptjqueryajax