Как повторно заполнить скрытое поле CSV при отправке формы с помощью jQuery

Question

<form>

    <input type="checkbox" id="01" name="01" />
    <input type="checkbox" id="02" name="02" />
    <input type="checkbox" id="03" name="03" />

    <input type="hidden" value="03,01," />

</form>

У меня есть форма выше; флажки 01 и 03 отмечены, когда страница закончила загрузку, используя код ниже.

Теперь мне нужно убедиться, что при изменении значения флажков также исчезнет скрытое поле CSV (хотя, возможно, это можно сделать при отправке формы?). Я думаю, что, используя созданные переменные, должно быть возможно повторно заполнить поле CSV, когда форма отправляет. то есть, используя selected_ids для добавления идентификаторов отмеченных полей в конец CSV (если они еще не присутствуют). Можно ли это сделать?

var csvValue = $('#csv-input').val();
var selected_ids = csvValue.split(',');
for (var i = 0; i < selected_ids.length; i++)
{
    var selected_id = selected_ids[i];
    $('#' + selected_id).attr('checked', 'checked');
}

Какой-то добрый человек дал мне этот код в моем предыдущем вопросе:

$(':checkbox').bind('change', function(event){
    if (this.checked == true){
      // add to hidden field
      var tempIdStr = $('#cvs-input').val();
      // if not in hidden value already
      if (tempIdStr.indexOf(this.id) > -1){
          tempIdStr += "id,"; // or ", id" depending on how you are seperating the ids
         $('#cvs-input').val(tempIdStr);
      }
    } else {
    // remove from hidden field
      var tempIds = $('#cvs-input').val().split(',');
      var index = tempIds.indexOf(this.id);
      if (index > -1){
          tempIds.splice(index, 1);
          $('#cvs-input').val(tempIds.join(',');
    }
});

Что, я думаю, близко, но еще не совсем там. Любая дальнейшая помощь в этом была бы велика, заранее спасибо.

Answer 1

Вы можете создать CSV из атрибутов элемента кратко, используя .map:

$(":checkbox").change(function() {
    var csv = $(":checkbox:checked").map(function() {
        return this.id;
    }).get().join(",");
    alert(csv);
    $("input:hidden").val(csv);
});

Демо: http://jsfiddle.net/karim79/tqAnX/2/

Как примечание, идентификаторы элементов не должны начинаться с цифр.