javascript - Change class from not to print, to print by check box in HTML -

i have lot of checkboxes , want print ones thats been checked. i've tried toggle, works until check it.

here code:

css

<style type="text/css" media="print"> .dontprint   { display: none; } </style> 

html

<div class="dontprint">   <div class="checkbox"> <label><input type="checkbox"id="coms">  \\private\computer services </label> </div>   <div class="coms">     <select class="form-control">         <option >read</option>         <option >edit</option>     </select>   </div> </div> 

js

$("#coms").click(function(){     $(".dontprint").toggle(); }); 

don't toggle visibility of class, toggle class itself.

$("#coms").click(function() {     $(this).parent().toggleclass("dontprint", !$(this).is(":checked")); }); 

and avoid having repeat code each id, should give checkboxes class well, instead of binding click handler specific id. or if they're inside particular div, can do:

$("#container :checkbox").click(function() {    $(this).closest(".hidable").toggleclass("dontprint", !this.checked);  });

.dontprint {    background-color: grey;  }  @media print {    .dontprint {      display: none;    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container">    <div class="hidable dontprint">      <div class="checkbox">        <label>          <input type="checkbox" id="coms1">checkbox 1</label>      </div>      <div class="coms">        <select class="form-control">          <option>read</option>          <option>edit</option>        </select>      </div>    </div>    <div class="hidable dontprint">      <div class="checkbox">        <label>          <input type="checkbox" id="coms2">checkbox 2</label>      </div>      <div class="coms">        <select class="form-control">          <option>read</option>          <option>edit</option>        </select>      </div>    </div>    <div class="hidable dontprint">      <div class="checkbox">        <label>          <input type="checkbox" id="coms3">checkbox 3</label>      </div>      <div class="coms">        <select class="form-control">          <option>read</option>          <option>edit</option>        </select>      </div>    </div>  </div>

i don't know how make stack snippets open in separate window can print it, made jsfiddle, , shows media query works.

http://jsfiddle.net/barmar/tyufjv6g/show/