jquery - 使用 jQuery 生成不同结果的复选框组合

Question

我目前正在制作下载表格。我的愿望是允许用户通过复选框修改他们的下载(“您希望下载中包含项目 X、Y 或 Z？三者的组合？”等)

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

因此，检查X 和Z 将为用户提供x_z.zip 的下载。 Y 和 Z 给出 y_z.zip，依此类推。而且，再次理想的是，当没有选择任何复选框时，总会有一个后备下载链接。

有人知道我如何使用 jQuery/Javascript 实现这一目标吗？

谢谢。

Answer 1

将纯 JS 与 jQuery 混合。假设您的复选框 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)代表“如果没有一个是真的”。因此，如果用户没有选择文件，他们将会收到警报。

但是，在我们的示例中，x和z被选中，所以我们到达 else block 。

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>

然后第四行将添加文档正文的链接。该链接将不可见且不可点击，因为其中没有文本。

第五行模拟单击链接，下载您想要的文件!我们完成了!

后后脚本

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

另外，花点功夫研究你的问题，而不仅仅是描述问题。