0
237
ViewsMostrar el valor de la casilla de verificación en un atributo de archivos de datos
Estoy haciendo la función de descarga de selección de archivos múltiples. Tengo una pregunta sobre cómo los valores en la casilla de verificación que seleccioné para poner en el atributo de archivos de datos. Por el momento, lo único que puedo hacer es poner los valores en la casilla de verificación en la entrada.
A continuación se muestra mi codificación:
$('#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>El resultado de salida se muestra a continuación, seguirá mi marca para seleccionar los valores en la entrada.
En realidad, quiero que el resultado sea que los valores en la casilla de verificación que seleccioné se coloquen en el atributo de archivos de datos. Como debajo del resultado de la muestra:
<button id="download-button" class="btn btn-primary btn-xs" data-files="file/john.jpeg file/important.pdf file/company.pdf">Download</button>Espero que alguien pueda orientarme sobre cómo solucionar este problema. Gracias.
3 answers
Answer question0
Primero debe usar el método attr() jQuery, intente configurarlo como un atributo:
$('#download-button').attr('data-files', (s.length > 0 ? s : ""));Entonces conviértete en:
$('#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
No todo tiene que ser accedido, leído o escrito en jQuery. Hacer uso de la propiedad del conjunto de dataset de HTMLElement ...
$('#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
De esta manera, puede establecer el valor de los archivos de datos y obtener el valor de él.
$('#download-button').attr('data-files', (s.length > 0 ? s : "")); var a = $('#download-button').data('files');Aquí está el ejemplo de trabajo, espero que sea útil.
<!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>