jeudi 14 octobre 2021

Show check box value in a data-files attribute

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.

output1

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.




Aucun commentaire:

Enregistrer un commentaire