我需要一种表单，如果选中了表单中的复选框，然后将“提交”按钮打印页面，该表单会将一个类应用于div

Question

设置是当用户到达页面时，它将以先前的形式将其信息放在页面上以供查看。 页面上还将显示一个表单，其中包含3个选项，每个选项列出了一个复选框，以及在表单底部显示“打印”的按钮。

用户正在查看的页面顶部的信息也将应用于包裹在div中且显示隐藏的3个字母。 每个复选框代表一个隐藏的字母，例如letter1，letter2和letter3。

因此，我需要一个具有3个字母中的每个字母的复选框的表单，一个单击时将打印整个页面的提交按钮，以及单击该按钮时该表单将一个类应用于所选字母的div的每个表单，因此print.css将仅打印对其应用了该类的div。 我希望所有这些都可以使用javascript或jquery完成，但实际上任何简单的方法都可以使用。

感谢您提供的所有帮助！

<form action="" id="letterPrint">

<input type="checkbox" name="letter1" value="letter1" /> Letter 1

<input type="checkbox" name="letter2" value="letter2" /> Letter 2

<input type="checkbox" name="letter3" value="letter3" /> Letter 3

<input type="submit" value="print" />

</form>

到目前为止，这是我的表格。

Answer 1

首先，添加打印样式表不需要特定div的类。 下面的代码可以使您在打印页面时使用打印CSS并将其应用到页面上，然后再发送给打印。

<link rel="stylesheet" type="text/css" href="path/to/screen.css" media="screen" />

<link rel="stylesheet" type="text/css" href="path/to/print.css" media="print"/>

使它自动打印比看起来要复杂得多。 但是，您可以使用此代码调出打印框

if (window.print) {
    window.print();
}

无法将页面直接发送到要打印的打印机，因为将数据发送到打印机所需的打印信息位于操作系统上。 JavaScript仅与浏览器交互。

Answer 2

您在找这种东西吗？