Show check box value in a data-files attribute-CodePudding

I'm doing the download select multi files function. I have a question about how the values in the checkbox I selected to put into the data-files attribute. At present, what I can only do is to put the values in the checkbox in the input.

Below is my coding:

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

The output result show in below, it will follow my tick to select the values in the input.

Actually, I want the result is the values in the checkbox I selected put into the data-files attribute. Like below the sample result:

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

Hope someone can guide me on how to solve this problem. Thanks.

CodePudding user response：

First you should using attr() jQuery method, try setting it as an attribute:

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

Then become:

$('#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 : ""));                               
});

CodePudding user response：

Not everything has to be accessed, read or written in a jQuery way. Make use of an HTMLElement's dataset property ...

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

CodePudding user response：

Using this way you can set the value to data-files and get the value from it.

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

Here is the working example hope it will helpful

         <!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>