2

我的问题是我正在为朋友设计一个网站。我所做的是设置一个缩略图列表，每个缩略图下面都有一个按钮，可以在新窗口中打开相应的图像，打印它，然后关闭窗口。Now he's decided that he wants checkboxes next to the thumbnails that when selected, a button click will print all selected images. 这可能吗？如果是这样，有人可以向我解释一下吗？谢谢你的时间。

4

1 回答 1

6

这是您可以通过多种可能方式执行此操作的一种方式：

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

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

以便稍后您可以使用 id 来判断图像的含义。阅读表格和复选框。

第二步：创建一个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。您可能需要更改一些代码，具体取决于您如何设置与复选框相关的图像，但这应该可以帮助您入门。

于 2012-06-14T21:02:22.533 回答