在数据文件属性中显示复选框值答案

【问题标题】：Show check box value in a data-files attribute在数据文件属性中显示复选框值
【发布时间】：2021-12-02 12:21:12
【问题描述】：

我正在做下载选择多文件功能。我对我选择的复选框中的值如何放入数据文件属性有疑问。目前我只能做的就是在input里面把checkbox里面的值打进去。

下面是我的代码：

$('#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>

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

【问题讨论】：

标签： javascript jquery checkbox dataset custom-data-attribute

【解决方案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 : ""));                               
});

【讨论】：

【解决方案2】：

并非所有内容都必须以 jQuery 方式访问、读取或写入。利用HTMLElement 的dataset 属性...

$('#multiselect-drop input').change(function() {

  let s = $('#multiselect-drop input:checked').map(function() {
    return this.value;
  }).get().join(' ');

  $('#results')[0].value = s;
  $('#download-button')[0].dataset.files = 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>

【讨论】：

【解决方案3】：

使用这种方式，您可以将值设置为数据文件并从中获取值。

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

这是一个工作示例，希望对您有所帮助

         <!DOCTYPE html>
            <html>
            <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            </head>
            <body>


            <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>
            <script>
            $('#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 : ""));
              
            });
            $('#download-button').on('click',function(){
             var a = $('#download-button').data('files'); 
               alert(a)
            });
            </script>
            </body>
            </html>

【讨论】：

感谢您的回答。但是为什么data-files的属性没有出来我选择的值呢？
因为我右键单击检查元素以查看<button id="download-button" class="btn btn-primary btn-xs" data-files="??????">Download</button>中没有更多的数据文件值
但是使用这种方式，您可以将值设置为数据文件并在任何想要使用的地方使用它。
我看到数据文件中没有显示值，你能再检查一下吗？
如果通过添加 value="" 标签来检查输入字段的方式相同，它也不会被设置。