CSS dont print unchecked/selected radio buttons or checkboxes

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 开发者_C百科those labels and corresponding checkboxes so the @media print hides them?

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.

You could do this using CSS, just check for the presence of the checked attribute

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


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

Fiddle: http://jsfiddle.net/L3Bwp/1/