Question

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

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

我希望我的文本域最终得到“黄色，绿色”的内容。

这似乎并不太复杂，但我完全脱离了联盟。我已经将jQuery用于其他一些事情，所以我准备好了框架，如果这样做更容易。

感谢您的任何建议 -

Answer 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);
    });
});

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

Answer 2

首先破解它（没有测试）：

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

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

Answer 3

修复Josh代码：

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

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

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

Answer 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);
    });
});

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

4 个答案: