javascript - 将类从不打印更改为通过 HTML 中的复选框打印

Question

我有很多复选框，我只想打印已选中的复选框。我试过切换，在我检查之前它一直有效。

这是我的代码:

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

Answer 1

不要切换类的可见性，切换类本身。

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

并且为了避免必须为每个 ID 重复此代码，您还应该为复选框指定一个类，而不是将点击处理程序绑定(bind)到特定的 ID。或者，如果它们都在一个特定的 DIV 中，您可以这样做:

$("#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>

我不知道如何在单独的窗口中打开 Stack Snippets，以便打印它，但我制作了一个 jsfiddle，它表明媒体查询有效。

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