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

【问题标题】：How to use jQuery to grab the values of checkboxes and spit them into a different form field如何使用 jQuery 获取复选框的值并将它们吐到不同的表单字段中
【发布时间】：2010-09-22 09:55:34
【问题描述】：

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

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

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

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

感谢您的建议--

【问题讨论】：

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

标签： javascript jquery forms

【解决方案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);
    });
});

【讨论】：