Print only selected records at checkbox

Question

I have the following table, but I’m not sure how to use the checkbox, ?

And since he’s inside the table he’s showing up in print,.

<table class='datatable table table-hover table-bordered table-responsiv'>
        <input type="button" name="imprimir" value="Imprimir" onclick="window.print();">
       <thead>
         <tr>
            <th align='center'><font size=1>#</font></th>
            <th align='center'><font size=1>Chamado</font></th>
            <th align='center'><font size=1>Problema</font></th>
            <th align='center'><font size=1>Descricao</font></th>
            <th align='center'><font size=1>Contato</font></th>
            <th align='center'><font size=1>Data</font></th>
            <th align='center'><font size=1>Loja</font></th>
            <th align='center'><font size=1>Setor</font></th>
            <th align='center'><font size=1>Aberto</font></th>
            <th align='center'><font size=1>Status</font></th>
            <th align='center'><font size=1>Farol</th>
         </tr>
        </thead>
      <?php
         echo"<tbody>";   
         while ($row = mysql_fetch_array($query_pesquisa)) {
         echo" <tr>";
            echo '<td><input type="checkbox"></td>';
            echo"<td align='center'><font size=2>".$row['CHAMADO'].         "</font></td>";
            echo"<td align='center'><font size=2>".$row['PROBLEMA'].        "</font></td>";
            echo"<td align='center'><font size=2>".$row['DESCRICAO'].       "</font></td>";
            echo"<td align='center'><font size=2>".$row['CONTATO'].         "</font></td>";
            echo"<td align='center'><font size=2>".$row['DATA_DE_ABERTURA']."</font></td>";
            echo"<td align='center'><font size=2>".$row['UNIDADE'].         "</font></td>";
            echo"<td align='center'><font size=2>".$row['SETOR'].           "</font></td>";
            echo"<td align='center'><font size=2>".$row['ABERTO_POR'].      "</font></td>";
            echo"<td align='center'><font size=2>".$row['STATUS'].          "</font></td>";
         if($row['HORAS_EM_ABERTO'] <= 48) { 
            echo "<td><img src='verde.png'></td>"; 
         } elseif($row['HORAS_EM_ABERTO'] <= 96) { 
            echo "<td><img src='laranja.png'></td>"; 
         } elseif($row['HORAS_EM_ABERTO'] >= 97) { 
            echo "<td><img src='vermelho.png'></td>";
         } else{ 
            echo "<td><img src='vazio.png'></td>";
         };

         echo" </tr>";

       }   
      echo"  </tbody>";
     echo" </table>";

    ?>

    <script type="text/javascript"> 
            $(document).ready(function() {
                $('.datatable').dataTable({
                    "sPaginationType": "bs_full"
                }); 
                $('.datatable').each(function(){
                    var datatable = $(this);
                    // SEARCH - Add the placeholder for Search and Turn this into in-line form control
                    var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
                    search_input.attr('placeholder', 'Search');
                    search_input.addClass('form-control input-sm');
                    // LENGTH - Inline-Form control
                    var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
                    length_sel.addClass('form-control input-sm');
                });
            });

            </script>    

Answer 1

You can create a function to select all rows that are not selected, add a class and with the @media print hide them.

I made an example below:

document.querySelector("button").addEventListener("click", function() {
  const allCheckedInputs = document.querySelectorAll("input");

  for(let i=0; i < allCheckedInputs.length; i++) {
    if (allCheckedInputs[i].checked) {
      allCheckedInputs[i].parentNode.parentNode.classList.add("visible-when-printing")
    }
  }
});
@media print {
  table tr { display: none; }
  table tr.visible-when-printing { display: table-row; }
}
<table>
  <tr>
    <td>
      <input type="checkbox" id="item-1" name="inputCheckbox">
     </td>
     <td>
      <label for="item-1">Item 1</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="item-2" name="inputCheckbox">
     </td>
     <td>
      <label for="item-2">Item 2</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="item-3" name="inputCheckbox">
     </td>
     <td>
      <label for="item-3">Item 3</label>
    </td>
  </tr>
</table>

<button>
  Preparar para impressão
</button>