Question

我有一个表单，我想要一个单独的CSS文件进行打印。屏幕上还有其他单选按钮和复选框。但我希望那些未经检查的单选按钮和复选框在我打印时隐藏。

有没有办法使用jQuery在这些标签和相应的复选框上设置类，以便@media打印隐藏它们？

Answer 1

在@media print { ... }块中，您可以隐藏所有复选框，然后只显示选中的复选框。

要定位这些选中的复选框，请使用输入的checked属性。

@media print {
    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"][checked="checked"] {
        display: inline-block;
    }
}

请参阅此小提琴http://jsfiddle.net/XfpM6/，它仅显示两个选中的复选框。

修改

要隐藏标签，您可以使用+选择器，该选择器定位直接兄弟。它将是：

input[type="checkbox"] + label { display: none; } input[type="checkbox"][checked="checked"] + label { display: inline; }

（假设您以这种方式拥有HTML <input type="checkbox" .. /> <label for="..">Label</label>，否则您必须为每个label添加一个类以隐藏它。

关于media print，您是否在 screen css之后添加了css ？

另一个解决方案可能是摆脱@media print块，并将css包含在
中
<link rel="stylesheet" href="..." media="print" />

在你的css链接的末尾（所以它会覆盖其他规则）。
这是相同的，关键是你在screen css 之后加入了这个css 。

Answer 2

您可以使用CSS执行此操作，只需检查是否存在checked属性

@media print{
  input[type="checkbox"]
  {
    visibility: hidden;
  }


  input[type="checkbox"][checked]
  {
    visibility: visible;
  }
}

小提琴：http://jsfiddle.net/L3Bwp/1/

CSS不打印未选中/选中的单选按钮或复选框

2 个答案: