如何使用jQuery通过AJAX提交页面元素的值？附HTML代码示例

没问题，我来帮你实现用jQuery通过AJAX提交这些checkbox的状态数据。下面分两种方案来实现，你可以根据自己的习惯选择：

方案一：保留原内联onchange事件 #

你的HTML里已经给checkbox绑定了onchange="getButtonDetails(this)"，那我们直接实现这个函数即可：

function getButtonDetails(checkbox) {
    // 把原生DOM checkbox转成jQuery对象，方便后续操作
    const $checkbox = $(checkbox);
    
    // 收集需要提交的核心数据
    const submitData = {
        // 从data-title属性获取标识（比如printing、engraving1）
        serviceType: $checkbox.data('title'),
        // 从data-order获取订单号
        orderNumber: $checkbox.data('order'),
        // 根据checkbox的选中状态设置对应值（原value是0，选中时我们传1更合理）
        status: $checkbox.is(':checked') ? 1 : 0
    };

    // 发送AJAX请求到后端接口
    $.ajax({
        url: '/your-backend-api', // 替换成你实际的后端接口地址
        type: 'POST', // 接口要求GET的话就改成GET
        data: submitData,
        // 如果是Laravel这类框架，需要带上CSRF令牌，否则会被拦截
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // 请求成功后的处理，比如给用户提示
            console.log('状态更新成功:', response);
            alert('服务状态已更新');
        },
        error: function(xhr, status, error) {
            // 请求失败的处理
            console.error('提交失败:', error);
            alert('更新失败，请稍后重试');
        }
    });
}

关键说明： #

• 用$(checkbox)把原生DOM元素转为jQuery对象，就能方便使用jQuery的data()、is()等方法
• data('title')可以直接获取HTML里的data-title属性值，不用手动写getAttribute
• 因为你的checkbox默认value是0，所以选中时我们手动设置为1，这样后端能清晰区分状态
• 如果后端不需要CSRF验证，可以去掉headers这部分

方案二：分离JS与HTML（推荐） #

内联事件虽然简单，但不利于代码维护，更推荐把事件绑定和HTML分开：

首先修改你的HTML，去掉onchange属性：

<td><input type="checkbox" data-toggle="switch" data-title="printing" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>
<td><input type="checkbox" data-toggle="switch" data-title="engraving1" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>

然后写jQuery的事件绑定逻辑：

// 页面加载完成后再绑定事件
$(document).ready(function() {
    // 给所有带ct-primary类的checkbox绑定change事件
    $('.ct-primary').on('change', function() {
        const $checkbox = $(this);
        const submitData = {
            serviceType: $checkbox.data('title'),
            orderNumber: $checkbox.data('order'),
            status: $checkbox.is(':checked') ? 1 : 0
        };

        $.ajax({
            url: '/your-backend-api',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: submitData,
            success: function(res) {
                console.log('操作成功:', res);
            },
            error: function(err) {
                console.error('操作失败:', err);
            }
        });
    });
});

这种方式的好处： #

• HTML结构更干净，没有混杂JS代码
• 所有事件逻辑集中在一起，后续修改或扩展更方便
• 如果后续新增同类checkbox，不需要再手动加onchange事件，自动生效

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