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

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;
}

（假设你有<input type="checkbox" .. /> <label for="..">Label</label>这种方式的HTML，否则你必须为每个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/