如何将选中的checkbox值存入下载按钮的data-files自定义属性

解决方案 #

你已经在现有逻辑中拿到了选中值拼接后的空格分隔字符串，只需要新增一行代码同步给下载按钮的data-files属性赋值即可，修改后的完整JS代码如下：

$('#multiselect-drop input').change(function() {
  var s = $('#multiselect-drop input:checked').map(function() {
    return this.value;
  }).get().join(' ');
  $('#results').val((s.length > 0 ? s : ""));
  // 新增代码：同步更新下载按钮的data-files属性
  $('#download-button').attr('data-files', s.length > 0 ? s : "");
});

说明 #

• 这里选用attr()方法而非data()方法，是因为data()只会更新jQuery内部缓存的属性值，不会修改DOM标签上的实际属性，attr()可以直接让HTML标签上的data-files属性和选中状态实时同步，完全符合你给出的预期效果。
• 后续如果需要读取选中的文件列表，调用$('#download-button').attr('data-files')即可直接拿到空格拼接的文件路径字符串。

内容的提问来源于stack exchange，提问作者Pi Network Crytocurrency