我正在做下載選擇多檔案功能。我有一個關于如何將我選擇的復選框中的值放入資料檔案屬性的問題。目前我唯一能做的就是把值放在輸入的復選框中。
下面是我的編碼：
$('#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>輸出結果如下所示，它會跟隨我的勾選來選擇輸入中的值。
實際上，我希望結果是我選擇的復選框中的值放入資料檔案屬性中。像下面的示例結果：
<button id="download-button" class="btn btn-primary btn-xs" data-files="file/john.jpeg file/important.pdf file/company.pdf">Download</button>
希望有人能指導我如何解決這個問題。謝謝。
uj5u.com熱心網友回復：
首先，您應該使用 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 : ""));
});
uj5u.com熱心網友回復：
并非所有內容都必須以 jQuery 方式訪問、讀取或寫入。利用 anHTMLElement的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>uj5u.com熱心網友回復：
使用這種方式，您可以將值設定為資料檔案并從中獲取值。
$('#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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315377.html
標籤：javascript html 查询 复选框