时间戳

首页 > 解决方案 > 选中复选框并单击下载按钮选择图像下载并下载所有图像

javascript - 选中复选框并单击下载按钮选择图像下载并下载所有图像

问题描述

当用户选中复选框并单击下载按钮时，选中的复选框图像将下载此代码我会尝试但图像不会下载

function downloadSelected() {
  $('input[type=checkbox]:checked').each(function() {
    window.open($(this).val());
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />

<ul>
    <li>
        <input type="checkbox" value="/download1.jpg" />
        Download Image 1
    </li>
    <li>
        <input type="checkbox" value="/download2.jpg" />
        Download Image 2
    </li>
    <li>
        <input type="checkbox" value="/download3.jpg" />
        Download Image 3
    </li>
</ul>
<a href="#" onclick="downloadSelected();">Download</a>

这个代码我会尝试，但它不工作图像不会下载

我如何下载选择了 chechk 框的图像是否有其他方法可以下载图像解决方案

标签： javascriptjqueryhtmlcss

解决方案

你这样做的方式是混合javascript和jquery正确使用jquery的一种方法是检查单击哪个复选框被选中然后继续下载，以下是我完成它的方式

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
<!-- <script src="script.js"></script> -->
          <ul>
            <li>
              <input type="checkbox" value="/download1.jpg" />
    Download Image 1
        </li>
            <li>
              <input type="checkbox" value="/download2.png" />
    Download Image 2
        </li>
            <li>
              <input type="checkbox" value="/download3.jpg" />
    Download Image 3
        </li>
          </ul>
          <a href="#">Download</a>
          <script>
          $(function(){
            $("a").click(function() {
            $("input:checkbox").each(function(){
                if($(this).is(":checked")){
                window.open($(this).val());
            }
            })
          })
        })
        </script>
</body>
</html>

推荐阅读