在数据文件属性中显示复选框值
Show check box value in a data-files attribute
我正在执行下载 select 多文件功能。我有一个关于如何将复选框中的值 select 放入数据文件属性的问题。目前,我只能做的就是把值放在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>
输出结果如下所示,它将跟随我的勾选 select 输入中的值。
实际上,我想要的结果是我 selected 放入数据文件属性的复选框中的值。就像下面的示例结果:
<button id="download-button" class="btn btn-primary btn-xs" data-files="file/john.jpeg file/important.pdf file/company.pdf">Download</button>
希望有人能指导我如何解决这个问题。谢谢
使用这种方式,您可以将值设置为数据文件并从中获取值。
$('#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>
首先你应该使用 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 : ""));
});
并非所有内容都必须以 jQuery 方式访问、读取或写入。利用 HTMLElement
's 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>
我正在执行下载 select 多文件功能。我有一个关于如何将复选框中的值 select 放入数据文件属性的问题。目前,我只能做的就是把值放在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>
输出结果如下所示,它将跟随我的勾选 select 输入中的值。
实际上,我想要的结果是我 selected 放入数据文件属性的复选框中的值。就像下面的示例结果:
<button id="download-button" class="btn btn-primary btn-xs" data-files="file/john.jpeg file/important.pdf file/company.pdf">Download</button>
希望有人能指导我如何解决这个问题。谢谢
使用这种方式,您可以将值设置为数据文件并从中获取值。
$('#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>
首先你应该使用 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 : ""));
});
并非所有内容都必须以 jQuery 方式访问、读取或写入。利用 HTMLElement
's 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>