如何使用 jQuery 从隐藏的 csv 字段中填充一系列复选框

Question

我有一个带有一堆复选框的表单，以及一个包含 CSV 数据的隐藏字段。基本上，我需要根据隐藏字段的值来勾选复选框：

<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 字段也会发生变化（尽管这可能在表单提交时完成？）。

我有限的 jQuery 知识让我对此一无所知，任何帮助将不胜感激。 （我知道其中一些最好在服务器端完成，但除了 javascript 我无法访问任何东西）。

下面的答案可以满足我的大部分需求。我认为使用创建的变量，应该可以在表单提交时重新填充 CSV 字段。即，使用 selected_ids 将选中框的 id 添加到 CSV 的末尾（如果它们不存在）。这个可以吗？

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