如何在单击时获取复选框的值

Question

我有一个 html 表，每行都有一个动态创建的复选框。复选框的选中状态是根据数据库中的值设置的。当在 html 表中选中复选框时，我需要捕捉更改并设置值，以便如果选中该框，则 value=1 else 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');               

            }

        });

    });

Answer 1

对于动态创建的元素，事件的处理方式如下：$(document).on('click', '.edit', function(e) {&nbsp; &nbsp;//e.preventDefault();&nbsp; &nbsp;var checkedStatus = 0;&nbsp; &nbsp;if ($(this).is(':checked')) {&nbsp; &nbsp; &nbsp; &nbsp;$(this).addClass('editMode');&nbsp; &nbsp; &nbsp; &nbsp;checkedStatus = 1;&nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;checkedStatus = 0;&nbsp; &nbsp; &nbsp; &nbsp;$(this).removeClass("editMode");&nbsp; &nbsp;}&nbsp;&nbsp;&nbsp; &nbsp; var id = this.id;&nbsp; &nbsp; var split_id = id.split("_");&nbsp; &nbsp; var field_name = split_id[0];&nbsp; &nbsp; var edit_id = split_id[1];&nbsp; &nbsp; var value = $(this).text();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: 'update.php',&nbsp; &nbsp; &nbsp; &nbsp; type: 'post',&nbsp; &nbsp; &nbsp; &nbsp; data: { field:field_name, value:value, id:edit_id, checked: checkedStatus },&nbsp; &nbsp; &nbsp; &nbsp; success:function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Save successfully');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});要将所有内容放入单个事件处理程序中，您可以将所有内容放入 .click 或 .focusout 中，具体取决于您要实现的目标。