Question

I have a form that I want a separate CSS file for printing. On the screen there are other radio buttons and checkboxes. But I want those unchecked radio buttons and checkboxes to hide when I print them.

Is there a way to use jQuery to set classes on those labels and corresponding checkboxes so the @media print hides them?

Answer 1

Within an @media print { ... } block you can hide all the checkboxes and then display only the checked checkboxes.

To target these checked checkboxes use the checked attribute of the input.

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

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

See this fiddle http://jsfiddle.net/XfpM6/ it shows only the two selected checkboxes.

EDIT:

To hide the label you could use the + selector, which targets the direct sibling.
It would be:

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

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

(Supposing you have the HTML in this way <input type="checkbox" .. /> <label for="..">Label</label>, otherwise you have to add a class to each label to hide).

Regarding the media print, did you add that css after the screen css?

Another solutions could be to get rid of the @media print block, and include the css with

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

at the end of your css links (so it overrides the other rules).

This would be the same, the key thing is that you include this css after the screen css.