如何在数千个复选框点击时获取当前值并传入AJAX？

解决方案1：通过onclick传入当前复选框对象 #

先修改PHP生成的复选框代码，把onclick改为传入当前元素this：

<!-- PHP动态生成复选框示例 -->
<?php
for ($i = 1; $i <= 1000; $i++) {
    echo "<input type='checkbox' class='fav' id='chk{$i}' value='Something_{$i}' onclick='AddRemoveFav(this)'>";
}
?>

然后调整JS函数，直接使用传入的复选框元素：

function AddRemoveFav(checkbox) {
    const $currentChk = $(checkbox);
    const isChecked = $currentChk.is(':checked');
    const chkValue = $currentChk.val();

    $.ajax({
        type: 'POST',
        url: 'addRemoveFav.php',
        // 修正原代码的语法错误，同时传递选中状态给PHP
        data: { 
            checked_box: chkValue,
            is_checked: isChecked 
        },
        success: function(data) {
            $('#message').html(data);
        },
        error: function(xhr) {
            $('#message').html('操作失败：' + xhr.responseText);
        }
    });
}

解决方案2：使用事件委托（更适合大量动态元素） #

如果有数千个复选框，内联onclick会增加HTML体积，推荐用jQuery事件委托，只在父容器上绑定一次事件：

先给复选框加统一的父容器：

<div id="fav-checkbox-wrap">
    <!-- PHP生成的复选框，无需onclick属性 -->
    <?php
    for ($i = 1; $i <= 1000; $i++) {
        echo "<input type='checkbox' class='fav' id='chk{$i}' value='Something_{$i}'>";
    }
    ?>
</div>
<div id="message"></div>

然后编写JS事件委托代码：

$(document).ready(function() {
    // 监听父容器内所有.fav类复选框的点击事件
    $('#fav-checkbox-wrap').on('click', '.fav', function() {
        const $currentChk = $(this);
        const isChecked = $currentChk.is(':checked');
        const chkValue = $currentChk.val();

        $.ajax({
            type: 'POST',
            url: 'addRemoveFav.php',
            data: { 
                checked_box: chkValue,
                is_checked: isChecked 
            },
            success: function(data) {
                $('#message').html(data);
            },
            error: function(xhr) {
                $('#message').html('操作出错：' + xhr.statusText);
            }
        });
    });
});

关键修正与提示 #

1. 原代码的错误：jQuery选择器需加#（比如$('#chk')而非$('chk')），AJAX的data部分原代码多了一个右括号，已修正
2. 传递选中状态：建议把is_checked传给PHP，方便后端直接判断是执行添加还是移除操作
3. 性能对比：事件委托比内联onclick更高效，仅绑定一个事件到父元素，避免为数千个元素重复绑定事件

内容的提问来源于stack exchange，提问作者Brandon Moore