javascript - 显示数据文件属性中的复选框值

Question

我正在执行下载选择多个文件的功能。我有一个关于如何将我选择的复选框中的值放入数据文件属性的问题。目前我只能将输入框中的值放入复选框中。

下面是我的编码:

$('#multiselect-drop input').change(function() {
  var s = $('#multiselect-drop input:checked').map(function() {
    return this.value;
  }).get().join(' ');
  $('#results').val((s.length > 0 ? s : ""));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="results" style="width:60%;">

<div id="multiselect-drop">
  <input type="checkbox" value="file/john.jpeg">
  <input type="checkbox" value="file/important.pdf">
  <input type="checkbox" value="file/company.pdf">
</div>

<button id="download-button" class="btn btn-primary btn-xs" data-files="">Download</button>

输出结果如下所示，它将跟随我的勾选来选择输入中的值。

实际上，我希望结果是我选择放入数据文件属性的复选框中的值。如下示例结果:

<button id="download-button" class="btn btn-primary btn-xs" data-files="file/john.jpeg file/important.pdf file/company.pdf">Download</button>

希望有人能指导我如何解决这个问题。谢谢。

Answer 1

首先你应该使用 attr() jQuery 方法，尝试将其设置为属性:

$('#download-button').attr('data-files', (s.length > 0 ? s : ""));

然后变成:

$('#multiselect-drop input').change(function() {
  var s = $('#multiselect-drop input:checked').map(function() {
    return this.value;
  }).get().join(' ');
  $('#results').val((s.length > 0 ? s : ""));
  $('#download-button').attr('data-files', (s.length > 0 ? s : ""));                               
});