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

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