如何在点击提交按钮时获取所有动态选中的Checkbox及对应输入框的值（附动态生成Checkbox实现代码）

首先得先完善你的addCheckbox函数——原代码只生成了Checkbox和标签，还没添加对应的输入框。我先调整下生成逻辑，让每个Checkbox旁边绑定一个输入框，方便后续关联取值：

function addCheckbox(name) {
    var container = $('#cblist');
    var inputs = container.find('input[type="checkbox"]');
    var id = inputs.length + 1;
    
    // 创建一个分组容器，把Checkbox、标签、输入框放一起，方便后续关联
    var group = $('<div class="checkbox-group"></div>').appendTo(container);
    
    $('<input />', { 
        type: 'checkbox', 
        id: 'cb'+id, 
        value: name 
    }).appendTo(group);
    
    $('<label />', { 
        'for': 'cb'+id, 
        text: name 
    }).appendTo(group);
    
    // 添加对应输入框，给个统一类名方便查找
    $('<input />', {
        type: 'text',
        class: 'cb-input',
        placeholder: '输入'+name+'的相关内容'
    }).appendTo(group);
}

接下来，点击提交按钮时，我们可以通过选中的Checkbox找到它所在的分组，再获取同组里的输入框值。这里提供两种常用实现方式：

方式一：通过父容器关联（推荐） #

利用我们给每个Checkbox组加的.checkbox-group类，找到选中Checkbox的父容器，再在容器内定位输入框：

$('#submit-btn').click(function() {
    // 用来存储结果的数组
    var selectedItems = [];
    
    // 遍历所有选中的动态Checkbox
    $('#cblist input[type="checkbox"]:checked').each(function() {
        var $currentCb = $(this);
        // 找到同组的输入框并取其值
        var inputValue = $currentCb.closest('.checkbox-group').find('.cb-input').val().trim();
        
        selectedItems.push({
            checkboxText: $currentCb.val(),
            inputContent: inputValue || '未输入内容' // 处理空值情况
        });
    });
    
    // 这里可以根据需求处理结果，比如打印、提交到后端等
    console.log('选中项及对应输入值：', selectedItems);
    // 示例：发送AJAX请求提交数据
    // $.post('/your-submit-url', { data: selectedItems });
});

方式二：通过ID关联（适合不想修改DOM结构的场景） #

如果不想给每个分组加容器，也可以通过Checkbox的ID来关联对应的输入框——比如给输入框设置和Checkbox关联的ID（如cb-input-1对应cb1）：

先修改addCheckbox里的输入框生成代码：

$('<input />', {
    type: 'text',
    id: 'cb-input-'+id, // 和Checkbox的ID形成对应关系
    placeholder: '输入'+name+'的相关内容'
}).appendTo(container);

然后是提交按钮的处理逻辑：

$('#submit-btn').click(function() {
    var selectedItems = [];
    
    $('#cblist input[type="checkbox"]:checked').each(function() {
        var cbId = $(this).attr('id');
        // 从Checkbox ID提取编号，匹配对应输入框的ID
        var inputId = cbId.replace('cb', 'cb-input-');
        var inputValue = $('#'+inputId).val().trim();
        
        selectedItems.push({
            checkboxText: $(this).val(),
            inputContent: inputValue || '未输入内容'
        });
    });
    
    console.log('选中项及对应输入值：', selectedItems);
});

小提示： #

• 确保所有动态生成的元素都在#cblist容器内，避免选择范围出错；
• 如果输入框是可选的，建议加空值判断，避免提交无效的空字符串；
• 如果是表单提交场景，也可以给Checkbox和输入框设置对应name属性（比如name="items[].label"和name="items[].content"），后端可以直接接收数组格式的数据。

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