在jQuery与Laravel项目中获取选中项的data-id（主键）及解决undefined问题

你遇到的undefined问题主要来自三个地方：选择器错误、data属性读取方式不对，以及没有筛选出已勾选的项。下面一步步帮你修复：

1. 修正选择器与data属性读取逻辑 #

你的目标元素是带class="cast"的div，所以选择器应该用.cast（类选择器），而不是cast（标签选择器，会去找不存在的<cast>标签）。另外，jQuery的data()方法会自动识别data-*前缀，所以data-id属性直接用data('id')读取即可，不用写data('data-id')。

2. 精准筛选已勾选的项 #

你需要先定位到被勾选的复选框，再找到它所在的父级.cast元素，这样才能拿到对应选中项的主键。

完整可运行解决方案 #

在你的「Générer」按钮点击事件中，添加以下代码来收集所有选中项的data-id：

$('#submit').click(function() {
    // 初始化数组存储选中的主键
    let selectedCastingIds = [];
    
    // 遍历所有被勾选的复选框
    $('.cast .custom-control-input:checked').each(function() {
        // 找到当前复选框所属的.cast父元素
        let targetCastItem = $(this).closest('.cast');
        // 获取data-id属性值（两种写法都可行）
        let castingId = targetCastItem.data('id');
        // 或者用 attr('data-id')，适合需要原始字符串的场景
        // let castingId = targetCastItem.attr('data-id');
        
        selectedCastingIds.push(castingId);
    });
    
    // 打印结果验证是否正确获取
    console.log('选中的Casting ID列表:', selectedCastingIds);
    
    // 这里就可以用selectedCastingIds数组发起AJAX请求了
    // $.ajax({
    //     url: '/your-api-endpoint',
    //     type: 'POST',
    //     data: { casting_ids: selectedCastingIds },
    //     headers: {
    //         'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
    //     },
    //     success: function(response) {
    //         // 处理返回的数据
    //     }
    // });
});

为什么之前的代码失效？ #

• $('cast')：错误使用了标签选择器，页面中不存在<cast>标签，因此找不到目标元素
• data('data-id')：jQuery的data()方法会自动移除data-前缀，正确写法是data('id')
• 未筛选选中项：之前的代码没有针对已勾选的复选框，而是试图获取所有.cast元素，不符合业务需求

额外优化提示 #

如果你的模态框内容是通过AJAX动态渲染的，建议用事件委托绑定按钮点击事件，确保事件能正确触发：

$(document).on('click', '#submit', function() {
    // 上述收集选中ID的逻辑放在这里
});

这样不管模态框内容何时加载完成，点击事件都能正常响应。

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