Как использовать jQuery, чтобы получить значения флажков и сплевать их в другое поле формы

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

Итак, больше улучшений. Добавьте имя класса (в моем примере «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);
    });
});

Answer 3

исправление к коду Джоша:

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

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

После моего исправления вы не должны получать лишние "," после последнего варианта.

Answer 4

Первый взлом на него (без тестирования):

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

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