Question

如何使用标准浏览器打印菜单，只能通过复选框打印所选图像？当然，使用javascript。提前致谢！我的代码：

<input type="checkbox" name="foto1" value="foto1"> <img src="1.jpg"><br>
<input type="checkbox" name="foto2" value="foto2"> <img src="2.jpg"><br>
<input type="checkbox" name="foto3" value="foto3"> <img src="3.jpg"><br>
<input type="checkbox" name="foto4" value="foto4"> <img src="4.jpg"><br>
<input type="checkbox" name="foto5" value="foto5"> <img src="5.jpg"><br>
<input type="checkbox" name="foto6" value="foto6"> <img src="6.jpg"><br>
<input type="checkbox" name="foto7" value="foto7"> <img src="7.jpg"><br>
<input type="checkbox" name="foto8" value="foto8"> <img src="8.jpg"><br>
<input type="checkbox" name="foto9" value="foto9"> <img src="9.jpg"><br>
<input type="checkbox" name="foto10" value="foto10"> <img src="10.jpg"><br>
<input type="checkbox" name="foto11" value="foto11"> <img src="11.jpg"><br>
<input type="checkbox" name="foto12" value="foto12"> <img src="12.jpg"><br>
<input type="checkbox" name="foto13" value="foto13"> <img src="13.jpg"><br>
<input type="checkbox" name="foto14" value="foto14"> <img src="14.jpg"><br>
<input type="checkbox" name="foto15" value="foto15"> <img src="15.jpg"><br>
<input type="checkbox" name="foto16" value="foto16"> <img src="16.jpg"><br>
<input type="checkbox" name="foto17" value="foto17"> <img src="17.jpg"><br>
<input type="checkbox" name="foto18" value="foto18"> <img src="18.jpg"><br>
<input type="checkbox" name="foto19" value="foto19"> <img src="19.jpg"><br>
<input type="checkbox" name="foto20" value="foto20"> <img src="20.jpg"><br>
<input type="checkbox" name="foto21" value="foto21"> <img src="21.jpg"><br>
<input type="checkbox" name="foto22" value="foto22"> <img src="22.jpg"><br>

<a href=# onClick="window.print();">Print</a>

Answer 1

我使用媒体查询建议如下内容：

@media print {
    /* hides all img elements that are adjacent to an input element: */
    input[type=checkbox],
    #printButtonElementID, 
    input[type=checkbox] + img {
        display: none;
    }
    /* shows all img elements directly adjacent to a checked input
       of type=checkbox: */
    input[type=checkbox]:checked + img {
        display: inline-block;
    }
}

参考文献：

Media Queries (at MDN)。

Answer 2

使用javascript 作为您提到的帖子：

我认为它会是这样的：

document.querySelectorAll('input[type=checkbox]:checked + img')

这是 online demo

如何使用javascript打印仅选中的复选框？

2 个答案: