如何獲得點擊復選框的值

Question

我有一個html表，其中每行動態創建一個復選框。 復選框的選中狀態是根據數據庫中的值設置的。 當在html表中選中此復選框時，我需要捕獲更改並設置值，以便如果選中此框，則value = 1，否則為value = 0。 值傳遞給更新查詢。 我不確定如何使用當前代碼完成此操作。

HTML：

<?php 
    $sqlGetEmployees = "select e.employeeID, e.lastName, e.firstName, l.number, p.name, e.gradeCertLevel, e.serviceYears, e.step, e.certified from employee e join location l on l.locationID = e.locationID join position p on p.positionID = e.positionID";
    $stmtGetEmployees = mysqli_prepare($db,$sqlGetEmployees);
    mysqli_stmt_execute($stmtGetEmployees);
    mysqli_stmt_bind_result($stmtGetEmployees, $id, $lastName, $firstName, $number, $name, $gradeCertLevel, $serviceYears, $salaryStep, $certified);

    $count = 1; 

   while(mysqli_stmt_fetch($stmtGetEmployees))
   {
        $checkedCertified = ($certified == '1') ? 'checked="checked"':'';
?>
    <tr>
        <!-- other table data -->
        <td> 
            <div id='certified_<?php echo $id; ?>'>
                <input contentEditable='true' class='edit' type='checkbox' id='certified' <?php echo $checkedCertified; ?> />
            </div> 
        </td>
    </tr>
<?php
        $count ++;
    }
    mysqli_stmt_close($stmtGetEmployees);
?>  

腳本：

    // Add Class
    $('.edit').click(function(){
        $(this).addClass('editMode');

    });

    // Save data
    $(".edit").focusout(function(){
        $(this).removeClass("editMode");

        var id = this.id;
        var split_id = id.split("_");
        var field_name = split_id[0];
        var edit_id = split_id[1];

        var value = $(this).text();

        $.ajax({
            url: 'update.php',
            type: 'post',
            data: { field:field_name, value:value, id:edit_id },
            success:function(response){
                console.log('Save successfully');               
            }
        });

    });

更新PHP

$field = $_POST['field'];
$value = $_POST['value'];
$editid = $_POST['id'];
$checkedStatus = $_POST['checked'];

if($field == "certified")
{
    $sqlUpdateCertified = "UPDATE employee SET ".$field."=? WHERE employeeID= ?";
    $stmtUpdateCertified = mysqli_prepare($db,$sqlUpdateCertified);
    mysqli_stmt_bind_param($stmtUpdateCertified, "ss",$checkedStatus,$editid);
    mysqli_stmt_execute($stmtUpdateCertified);
    mysqli_stmt_close($stmtUpdateCertified);
}

Answer 1

對於動態創建的元素，事件的處理方式如下：

$(document).on('click', '.edit', function(e) {
   //e.preventDefault();
   var checkedStatus = 0;
   if ($(this).is(':checked')) {
       $(this).addClass('editMode');
       checkedStatus = 1;
   } else {
       checkedStatus = 0;
       $(this).removeClass("editMode");
   }  

    var id = this.id;
    var split_id = id.split("_");
    var field_name = split_id[0];
    var edit_id = split_id[1];

    var value = $(this).text();

    $.ajax({
        url: 'update.php',
        type: 'post',
        data: { field:field_name, value:value, id:edit_id, checked: checkedStatus },
        success:function(response){
            console.log('Save successfully');               
        }
    });
});

要將所有內容放在單個事件處理程序中，可以根據要實現的目的將所有內容都放在.click或.focusout中。