如何使用 jQuery 获取复选框的值并将它们吐到不同的表单字段中

Posted 2023-05-09

【中文标题】如何使用 jQuery 获取复选框的值并将它们吐到不同的表单字段中

【英文标题】：How to use jQuery to grab the values of checkboxes and spit them into a different form field

【发布时间】：2010-09-22 09:55:34

【问题描述】：

我有一个包含一堆复选框的表单。在提交表单之前，我想获取复选框的值并将它们粘贴到文本字段中，然后提交。

所以我可能有： 红色的 橘子 X 黄色 蓝色 X 绿色

我希望我的文本字段以内容 "Yellow, Green" 结尾。

这似乎并不太复杂，但我完全不符合我的要求。我已经将 jQuery 用于其他一些事情，所以我已经准备好了框架，如果这样可以更轻松的话。

感谢您的建议--

【问题讨论】：

请注意，请使用“添加评论”选项讨论答案，而不是添加新答案。

【参考方案1】：

只需使用此代码：

$(function()
    $('#YourFormID').bind('submit',function()
        var serializedCheckboxes = '';
        $("input[type=checkbox]").each(function() 
         if($(this).attr("checked")) 
            serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
         
        );
        $("input[name=allchecks]").attr("value", serializedCheckboxes);
    );
);

它在页面加载时启动并绑定到表单正确函数的“提交”事件

【讨论】：

忘记了，最好使用 ,join(stuff,',') 而不是手动将其构建到本地字符串变量中。

【参考方案2】：

首先破解它（未经测试）：

var serializedCheckboxes = '';
$("input type='checkbox'").each(function() 
 if($(this).attr("checked")) 
  serializedCheckboxes += $(this).attr("value") + ',';
 
);

$("input name='allchecks').attr("value", serializedCheckboxes);

【参考方案3】：

修复 Josh 代码：

var serializedCheckboxes = '';
$("input[type=checkbox]").each(function() 
 if($(this).attr("checked")) 
  serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
 
);

$("input[name=allchecks]").attr("value", serializedCheckboxes);

经过我的修复后，您不应该在最后一个选项之后获得额外的“，”。

【参考方案4】：

因此，还有更多改进。将类名（在我的示例中为“colorCheckBoxes”）添加到表单中具有颜色的所有复选框（如果存在复选框） - 这有助于避免当您想在表单中使用不同的附加复选框以用于选择颜色之外的其他目的时出现问题。然后使用此代码：

$(function()
    $('#YourFormID').bind('submit',function()
        var serializedCheckboxes = '';
        $(this).find("input[type=checkbox]").filter('.colorCheckBoxes').each(function() 
         if($(this).attr("checked")) 
            serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
         
        );
        if (serializedCheckboxes != '')
            $(this).find("input[name=allchecks]").attr("value", serializedCheckboxes);
    );
);