Question

我的问题是我正在为朋友设计一个网站。我所做的是设置一个缩略图列表，每个缩略图下都有一个按钮，用于在新窗口中打开相应的图像，打印它并关闭窗口。现在他决定他想要缩略图旁边的复选框，选中后，点击一下按钮就会打印所有选中的图像。这可能吗？如果是这样，有人可以向我解释一下吗？谢谢你的时间。

Answer 1

以下是一种可以通过多种方式实现此目的的方法：

第一步：制作一个包含所有内容和表单内部的表单，在每个图像的旁边或下面放置一个带有唯一ID的复选框，我们可以使用它来识别它是哪一个例如

<input type="checkbox" id="imageNumber3"/>

以后您可以使用id来判断图像的含义。阅读forms and check boxes。

第二步：创建一个javascript函数来获取当前选中的复选框

function getChecked(form) {
    var names;
    var c = document.getElementById(form).getElementsByTagName('input');
    for (var i = 0; i < c.length; i++) {
        if (c[i].type == 'checkbox' && c[i].checked) {
             names.append(c[i].id);
        }
    }
    return names;
}

当你给它复选框所在表格的id时，这个函数应该是这样，走过并检查每个框以查看它是否被选中。它将构建一个已经选择并返回该数组的id数组。

第三步：当按钮被点击时，使一个新的打印功能被调用

function printBunch(ids) {
    var windowUrl = 'about:blank';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();

    var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

    for(id in ids) {
        //assuming the image will be the next sibling of the checkbox
        var currentImage = document.getElementById(id).nextSibling.innerHTML;
        printWindow.document.write(currentImage);
    }
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
 }

然后点击按钮点击“printBunch（getChecked（））;”传入已检查图像的ID。您可能需要更改部分代码，具体取决于您根据复选框设置图像的方式，但这应该可以帮助您入门。

在网页中打印多个选定的图像

1 个答案: