jQueryを使用してフォーム送信時に非表示のCSVフィールドを再入力する方法

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を使用してチェックボックスのIDを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

あなたは簡潔.mapを使用して属性要素からCSV構築することができます：

$(":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/

を、要素IDは、数字で始めるべきではありません。