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

Question

我正在执行下载 select 多文件功能。我有一个关于如何将复选框中的值 select 放入数据文件属性的问题。目前，我只能做的就是把值放在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>

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

实际上，我想要的结果是我 selected 放入数据文件属性的复选框中的值。就像下面的示例结果：

<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

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

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

Answer 2

首先你应该使用 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 : ""));                               
});

Answer 3

并非所有内容都必须以 jQuery 方式访问、读取或写入。利用 HTMLElement's 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>

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

Show check box value in a data-files attribute

javascript

jquery

checkbox

dataset

custom-data-attribute