0
232
VistasShow 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.
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.
3 Respuestas
Responde la pregunta0
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 : ""));
});
0
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>0
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>