Question

我目前正在处理下载表单。我的愿望是允许用户通过复选框修改他们的下载（“你喜欢下载中的项目X，Y或Z吗？三者的组合？”等等。）

理想情况下，这些复选框组合将回显不同的预先存在的下载链接。

因此，检查 X和Z 可让用户下载 x_z.zip 。 Y和Z 提供 y_z.zip ，依此类推。而且，理想情况下，如果没有选中复选框，将始终存在备用下载链接。

有人知道如何通过 jQuery / Javascript 实现这一目标吗？

感谢。

Answer 1

将纯JS与jQuery混合使用。假设你的复选框是＆＃39; ID为x，y，z。

function OnDownloadSubmit() {
  var isX = $('#x').prop('checked');
  var isY = $('#y').prop('checked');
  var isZ = $('#z').prop('checked');
  if(!(isX || isY || isZ)) { // if none of the checkboxes is checked
    // TODO: handle this problem
  } else {
    var elemlist = [];
    if(isX) elemlist = elemlist.concat(['x']);
    if(isY) elemlist = elemlist.concat(['y']);
    if(isZ) elemlist = elemlist.concat(['z']);
    var filename = elemlist.join('_') + '.zip';
    // Downloading
    var link = document.createElement('a');
    link.href = filename;
    link.download = filename;
    document.getElementsByTagName('body')[0].appendChild(link); // won't be visible
    link.click();
  }
}

编辑/解释/扩展/完成/后脚本/无论

假设以下布局（ HTML ）：

<input type="checkbox" id="x"> File X <br />
<input type="checkbox" id="y"> File Y <br />
<input type="checkbox" id="z"> File Z <br />
<input type="button" value="Request files" id="request" onclick="OnDownloadSubmit()">

使用3个复选框x，y和z以及提交按钮request定义布局。按request时，将调用OnDownloadSubmit函数。

另外假设在TODO函数的OnDownloadSubmit位置我们放了这一行（ JS ）：

alert('Please select at least one file to download!');

因此用户得到了适当的警告。

我们会检查x和z并跟踪代码。

var isX = $('#x').prop('checked'); // = true
var isY = $('#y').prop('checked'); // = false
var isZ = $('#z').prop('checked'); // = true

这个纯JS将初始化3个变量。它们表示是否选中了复选框。

表达式!(isX || isY || isZ)代表＆＃34;如果它们都不是真的＆＃34;。因此，如果用户没有选择文件，他们将被警告。

但是，在我们的示例中，检查了x和z，因此我们转到else块。

var elemlist = [];
if(isX) elemlist = elemlist.concat(['x']); // elemlist = ['x']
if(isY) elemlist = elemlist.concat(['y']); // doesn't get invoked
if(isZ) elemlist = elemlist.concat(['z']); // elemlist = ['x', 'z']
var filename = elemlist.join('_') + '.zip'; // filename = 'x_z.zip'

如果选中相应的复选框，此JS将初始化空列表elemlist并将'x'，'y'，'z'字母添加到列表中。 join('_')方法会将所有元素与'_'结合在一起。然后我们添加'.zip'，我们有文件名！

var link = document.createElement('a');
link.href = filename;
link.download = filename;
document.getElementsByTagName('body')[0].appendChild(link);
link.click();

这部分有点棘手。前3行构建了一个如下所示的链接：

<a href="x_z.zip" download="x_z.zip"></a>

然后第四行将添加指向文档正文的链接。该链接将是不可见的，不可点击，因为它没有文本。

第五行模拟链接的点击，下载所需的文件！我们完成了！

POST-POST-SCRIPTUM

请学习JS和jQuery essentials，然后将这个问题放在网站上，因为最糟糕的是使用代码而不理解它。

另外，为研究问题付出一些努力，不仅要描述问题。

复选框组合使用jQuery产生不同的结果

1 个答案: