Manipulation de valeur d'élément jQuery

Question

J'ai une série de cases à cocher que je veux lier à mon modèle MVC. J'essaie donc d'obtenir des valeurs de case à cocher et d'ajouter ces valeurs à un champ de saisie caché qui a l'ID approprié pour lier mon modèle.

@foreach (var answer in question.Answers) 
{ 
    <input type='checkbox' id='@answer.Id' value='@(answer.AnswerText)' onchange="toggleHidden(this)"/> 
} 
<input type="hidden" id='[@countHolder]' name='WrappedAnswers' value="" /> 

Et mon code javascript est:

function toggleHidden(elem) { 
    var isChecked = $(elem).is(":checked"); 
    if (isChecked) { 
     var checkString = elem.value + "|"; 
     var currentString = $('#[@(countHolder)]').val(); 
     $('#[@(countHolder)]').val(currentString + checkString); 
    } 
    else { 
     // Remove checkString from $('#[@(countHolder)]').value 
    } 
} 

Comme vous l'aurez deviné, le code ne fonctionne pas. Je ne suis pas très bon en javascript, qu'est-ce que je fais mal.

Merci.

Modifier: Voici le code rendu

<!-- Answers --> 
<input type='checkbox' id='158' name='WrappedAnswers' value='Answer 1' onchange="toggleHidden(this)"/> 
<input type='checkbox' id='159' name='WrappedAnswers' value='Answer 2' onchange="toggleHidden(this)"/> 
<input type='checkbox' id='160' name='WrappedAnswers' value='Answer 3' onchange="toggleHidden(this)"/> 

<input type="hidden" id='[5]' name='WrappedAnswers' value="" /> 

<script type="text/javascript"> 
function toggleHidden(elem) { 
    var isChecked = $(elem).is(":checked"); 
    if (isChecked) { 
     var checkString = elem.value + "|";           
     $('#[5]').val($('#[5]').val() + checkString); 
    } 
    else { 
    } 
} 
</script> 
<!-- End Answers --> 

Answer 1

Au lieu de gérer tous les changements (cocher/décocher) et d'avoir à ajouter/supprimer les valeurs dans une chaîne « tube délimité » (valeur de votre champ caché), j'ajouterais un gestionnaire "on submit" pour le formulaire qui passerait par les cases à cocher et ajouterait celles qui sont vérifiées.

Si vous placez vos cases à cocher dans un conteneur div, il serait plus facile de les sélectionner dans jQuery. Donc, le code serait quelque chose comme:

<div id="checkContainer"> 
    @foreach (var answer in question.Answers) 
    { 
     <input type="checkbox" id="@answer.Id" value="@(answer.AnswerText)" /> 
    } 
</div> 
<input type="hidden" id="countHolder" name="WrappedAnswers" value="" /> 
<script> 
    $("form").submit() { 
      var $checkboxes = $("#checkContainer").find("[type='checkbox']"); 
      $checkboxes.each(function() { 
       if ($(this).is(":checked")) {     
        $("#countHolder").val($("#countHolder").val() + "|" + $(this)val()); 
       } 
      }); 
      return true; 
    } 
</script>