我如何让ajax使用多个复选框值而不仅仅是第一个？

Question

我正在创建一个用户管理页面，其中有一个类似表格，表格的第一列是复选框，第一个是全选框。我想要一个按钮来获取一个或多个值（如果选中复选框）并在发布请求中发送它。我写了代码，但它总是并且只发送表中的第一个值，无论是否有任何盒子是票。

html 表格如下：

        <table id="userList" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th><input type="checkbox" onClick="toggle(this)" /></th>
                    <th>Name</th>
                    <th>Credential</th>
                    <th>Email</th>
                    <th>Start Date</th>
                    <th>End Date</th>               
                    <th>Status</th>
                    <th></th>
                    <th></th>
                    <th></th>
                    

                </tr>
            </thead>
        </table>

第一列是由 php 代码填充的复选框：

          $userRows[] = '<input id="cbuserid" type="checkbox" name="check" value="'.$users['id'].'"/>';

复选框选择所有脚本

function toggle(source) {
    checkboxes = document.getElementsByName('check');
    for(var i=0, n=checkboxes.length;i<10;i++) {
      checkboxes[i].checked = source.checked;
    }
  }

我想制作一个按钮来获取用户ID值并在发布请求中提交它们以同时禁用多个用户，php代码工作正常，但我无法使jquery部分工作：

    $(document).on('click', '.deactivateUsers', function(){
        var userid = $('#cbuserid').val();  
        var action = "userDeactivate";
        if(confirm("Are you sure you want to deactivate this user?")) {
            $.ajax({
                url:"action.php",
                method:"POST",
                data:{userid:userid, action:action},
                success:function(data) {                    
                    window.location.reload();
                    
                }
            })
        } else {
            return false;
        } 
    });

无论是否选中任何复选框，此代码始终采用 cbuserid 的第一个值。

Answer 1

我建议您使用按钮的 onclick 属性并添加

data-user="'.$users['id'].'"

类似这样的事::

<input type="button" onclick="function_name()" data-user="'.$users['id'].'">
function function_name()
{
  let id = $(this).attr("data-user");
}

或没有数据

<input type="button" onclick="function_name("'.$users['id'].'")">
function function_name(user_id)
{
  let id = user_id;
}

您可以使用具有数据属性的方法

<input class="checkbox-user" type="checkbox" data-user="'.$users['id'].'"/>

$('input:checkbox:checkbox-user').each(function () {
    if(this.checked)
        console.log($(this).attr("data-user"););
});