I have to print the PDF page only of the items that are selected with the checkbox.
<td>Prima riga</td>
<td><input type="checkbox"></td>
<td><textarea class="form-control autosize" style="resize: none; overflow: hidden;"></textarea></td>
</tr>
<tr>
<td>Seconda riga</td>
<td><input type="checkbox"></td>
<td><textarea class="form-control autosize" style="resize: none; overflow: hidden;"></textarea></td>
</tr>
<tr>
<td>Terza riga</td>
<td><input type="checkbox"></td>
<td><textarea class="form-control autosize" style="resize: none; overflow: hidden;"></textarea></td>
</tr>
>Solution :
You can introduce a class .hidden-on-print defined like this:
@media print {
.hidden-on-print {
display: none;
}
}
Now all you have to do is add/remove this class to the closest tr when the checkbox is changed.
// initialize
document.querySelectorAll("[type=checkbox]").forEach((chk) => {
chk.checked = false
chk.addEventListener('click', function(ev) {
if (this.checked) {
this.closest("tr").classList.remove("hidden-on-print");
} else {
this.closest("tr").classList.add("hidden-on-print");
}
})
})
document.querySelectorAll("tr").forEach(tr => tr.classList.add("hidden-on-print"))@media print {
.hidden-on-print {
display: none;
}
}<table>
<tr>
<td><label for="id1">Prima riga</label></td>
<td><input id="id1" type="checkbox"></td>
<td><textarea class="form-control autosize" style="resize: none; overflow: hidden;"></textarea></td>
</tr>
<tr>
<td><label for="id2">Seconda riga</label></td>
<td><input id="id2" type="checkbox"></td>
<td><textarea class="form-control autosize" style="resize: none; overflow: hidden;"></textarea></td>
</tr>
<tr>
<td><label for="id3">Terza riga</label></td>
<td><input id="id3" type="checkbox"></td>
<td><textarea class="form-control autosize" style="resize: none; overflow: hidden;"></textarea></td>
</tr>
</table>
<button onclick="print()">print</button>