在数据文件属性中显示复选框值
Posted
技术标签:
【中文标题】在数据文件属性中显示复选框值【英文标题】：Show check box value in a data-files attribute 【发布时间】：2021-12-02 12:21:12 【问题描述】：我正在做下载选择多文件功能。我对我选择的复选框中的值如何放入数据文件属性有疑问。目前我只能做的就是在input里面把checkbox里面的值打进去。
下面是我的代码：
$('#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>
希望有人能指导我如何解决这个问题。谢谢。
【问题讨论】：
【参考方案1】：首先你应该使用 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 : ""));
);
【讨论】：
【参考方案2】：并非所有内容都必须以 jQuery 方式访问、读取或写入。利用htmlElement 的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>【讨论】：
【参考方案3】：使用这种方式，您可以将值设置为数据文件并从中获取值。
$('#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>【讨论】：
感谢您的回答。但是为什么data-files的属性没有出来我选择的值呢？ 因为我右键单击检查元素以查看<button id="download-button" class="btn btn-primary btn-xs" data-files="??????">Download</button>中没有更多的数据文件值
但是使用这种方式，您可以将值设置为数据文件并在任何想要使用的地方使用它。
我看到数据文件中没有显示值，你能再检查一下吗？
如果通过添加 value="" 标签来检查输入字段的方式相同，它也不会被设置。以上是关于在数据文件属性中显示复选框值的主要内容，如果未能解决你的问题，请参考以下文章
使用复选框显示数据库并将选定的数据查询到另一个 php 文件中
这是我插入数据库的图像。但它不会显示图像路径或文件夹中的图像？