jQuery元素值操作

Question

我有一系列复选框，我想绑定到我的MVC模型。所以我尝试获取复选框值并将这些值添加到隐藏的输入字段，该字段具有适当的Id以绑定到我的模型。

@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="" /> 

我的JavaScript代码：

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

正如你猜到了，代码不能正常工作。我在JavaScript中不是很好，我做错了什么。

谢谢。

编辑：这里是渲染代码

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

而不是处理的每一个变化（选中/取消），并无需添加/删除值变成“管道分隔”的字符串（的价值你隐藏字段），我会为表单添加一个“on submit”处理程序，该处理程序将通过复选框并添加被检查的表单。

如果您将复选框放入div容器中，则从jQuery中选择它们会更容易。因此，代码将如下所示：

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