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

看到这个 fiddle 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 block ，并包含 css

<link rel="stylesheet" href="..." media="print" />

位于 css 链接的末尾(因此它会覆盖其他规则)。

这都是一样的，关键是你在 screen 之后包含这个 css CSS。