如何使用 jQuery 重新填充表单提交时隐藏的 CSV 字段

Posted 2023-05-08

【中文标题】如何使用 jQuery 重新填充表单提交时隐藏的 CSV 字段

【英文标题】：How to re-populate hidden CSV field on form submit using jQuery

【发布时间】：2011-05-15 15:34:46

【问题描述】：

我有上面的表格；使用下面的代码完成页面加载后，勾选复选框 01 和 03。

我现在需要确保当复选框的值发生变化时，隐藏的 CSV 字段也会发生变化（尽管这可能在表单提交时完成？）。我认为使用创建的变量，应该可以在表单提交时重新填充 CSV 字段。即，使用 selected_ids 将选中框的 id 添加到 CSV 的末尾（如果它们不存在）。这个可以吗？

var csvValue = $('#csv-input').val();
var selected_ids = csvValue.split(',');
for (var i = 0; i 

某个好心人在我之前的问题中给了我这个代码：


$(':checkbox').bind('change', function(event)
    如果（this.checked == true）
      // 添加到隐藏字段
      var tempIdStr = $('#cvs-input').val();
      // 如果不在隐藏值中
      if (tempIdStr.indexOf(this.id) > -1)
          tempIdStr += "id,"; // 或 ", id" 取决于你如何分隔 id
         $('#cvs-input').val(tempIdStr);
      
     别的 
    // 从隐藏字段中移除
      var tempIds = $('#cvs-input').val().split(',');
      var index = tempIds.indexOf(this.id);
      如果（索引> -1）
          tempIds.splice(index, 1);
          $('#cvs-input').val(tempIds.join(',');
    
);

我认为这很接近，但还没有完全实现。任何进一步的帮助都会很棒，在此先感谢。

【问题讨论】：

请记住，以数字开头的 id 是无效的，可能会导致问题。

【参考方案1】：

您可以使用 .map 简洁地从元素属性构建 CSV：

$(":checkbox").change(function() 
    var csv = $(":checkbox:checked").map(function() 
        return this.id;
    ).get().join(",");
    alert(csv);
    $("input:hidden").val(csv);
);

演示：http://jsfiddle.net/karim79/tqAnX/2/

附带说明，元素 ID 不应以数字开头。

【讨论】：

+1 - 需要注意的是 ID 号限制是 html4 特定的，而不是 HTML5 :)

这很完美，而且非常简洁——谢谢。适用于我的问题中的第一个代码块（实际填充复选框），但仅当我将它放在它之前。知道这是为什么吗？