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>

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

标签： javascriptjquerycheckboxdatasetcustom-data-attribute

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 : ""));                               
});