选中复选框,然后单击下载按钮以选择图像下载,并同时下载所有图像

时间:2018-10-22 06:49:17

标签: javascript jquery html css

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

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框的图像,还有其他方法可以下载图像解决方案

1 个答案:

答案 0 :(得分:0)

您执行此操作的方式是javascript和jquery的混合,与jquery正确执行此操作的一种方法是检查click选中了哪个复选框,然后继续下载,以下是我完成的方式

<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>