Comment remplir une série de cases à cocher à partir d'un champ caché csv en utilisant jQuery

Question

J'ai un formulaire avec un tas de cases à cocher, et un champ caché qui contient des données CSV. Au fond, je dois les cases à cocher à cocher en fonction de la valeur du champ caché:

<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> 

Ainsi, dans l'exemple ci-dessus 01 et 03 cases à cocher besoin lorsque la page a terminé le chargement. Je dois également m'assurer que lorsque la valeur des cases à cocher change, le champ CSV masqué change également (bien que cela puisse être fait lorsque le formulaire est soumis).

Mes connaissances limitées en jQuery ne m'ont pas permis d'obtenir ce résultat, toute aide serait grandement appréciée. (Je sais que cela serait mieux fait côté serveur, mais je n'ai pas accès à autre chose que javascript).

La réponse ci-dessous fait la plupart de ce que je veux. Je pense qu'en utilisant les variables créées, il devrait être possible de remplir à nouveau le champ CSV lorsque le formulaire est soumis. c'est-à-dire, en utilisant selected_ids pour ajouter les identifiants des cases cochées à la fin du CSV (si elles ne sont pas déjà présentes). Cela peut-il être fait?

Answer 1

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

Answer 2

$(':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(','); 
    } 
});