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>