Print Checkbox with Jquery

Question

Good morning

I created a shopping list with checkbox and would like to print only the selected checklists.

follow the codes below:

html code

<div class="cont-list carnes">
    <h3 class="text-center"><span>Carnes / Aves / Peixes</span></h3>
    <div class="col-md-3">
        <input value="lombo" type="checkbox" /><label>Lombo</label>
    </div>
    <div class="col-md-3">
        <input value="peixes" type="checkbox" /><label>Peixes</label>
    </div>
    <div class="col-md-3">
        <input value="frango" type="checkbox" /><label>Frango</label>
    </div>
    <div class="col-md-3">
        <input value="carne-suina" type="checkbox" /><label>Carne de Suína</label>
    </div>
    <div class="col-md-3">
        <input value="carne-bovina" type="checkbox" /><label>Carne Bovina</label>
    </div>
</div>

I used a jQuery to print the list but I would like you to print only the selected items.

<!--input type="text" id="myVal" value=""-->

<input id="printButton" type="button" value="Imprimir Lista" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
  /*$(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() { return $(this).val(); }).get();
    $("#myVal").val(arr.join('/'));
  });*/
  $("input:button").click(function () {
    $('input[type="checkbox"]').each(function() {
        var $this = $(this);
        if($this.is(':checked')) {
           $this.attr('checked', true);
        } else {
            $this.removeAttr('checked');
        }
    });

    $("#printing").printThis({
        pageTitle: "Lista de Compras ",
        importStyle: true   
    });
  }); 
});
</script>

Answer 1

Use as in the example below:

$('#btn').click(function () {
        $('input[type="checkbox"]').each(function() {
            if(!$(this).prop('checked')){
                $(this).remove();
                $('label[for='+this.id+']').remove();
            }
        });
    });

<div class="cont-list carnes">
        <h3 class="text-center"><span>Carnes / Aves / Peixes</span></h3>
        <div class="col-md-3">
            <input id="cb_lombo" value="lombo" type="checkbox" />
            <label for="cb_lombo">Lombo</label>
        </div>
        <div class="col-md-3">
            <input id="peixe" value="peixes" type="checkbox" />
            <label for="peixe">Peixe</label>

        </div>
        <div class="col-md-3">
            <input id="cb_frango" value="frango" type="checkbox" />
            <label for="cb_frango" >Frango</label>
        </div>
        <div class="col-md-3">
            <input id="cb_carne_suica" value="carne-suina" type="checkbox" />
            <label for="cb_carne_suica">Carne de Suína</label>
        </div>
        <div class="col-md-3">
            <input id="cb_carne_bovina" value="carne-bovina" type="checkbox" />
            <label for="cb_carne_bovina">Carne Bovina</label>
        </div>
    </div>

    <button id="btn">
        aqui
    </button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

How are you using bootstrap, you can use a class that esconde the elements it has at the time of printing.

In the version 3.3.7 bootstrap, the class is : .hidden-print

In the version 4.1 is called: .d-print-none

So just capture the element pai of each element that is not checado with the method parent(), and add the class to them.

jQuery(function ($) {  
  $("input:button").click(function () {
    $('input[type="checkbox"]').each(function() {
        var $this = $(this);
        if($this.is(':checked')) {
           $this.attr('checked', true);
           $this.parent().removeClass('hidden-print'); //volta o elemento para impressão
        } else {
            $this.removeAttr('checked');  
            console.log( $this.parent().attr('class'));
            $this.parent().addClass('hidden-print'); //esconde o elemento na hora da impressao
        }
    });
    
    

    /*$("#printing").printThis({
        pageTitle: "Lista de Compras ",
        importStyle: true   
    });*/
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-list carnes">
    <h3 class="text-center"><span>Carnes / Aves / Peixes</span></h3>
    <div class="col-md-3">
        <input value="lombo" type="checkbox" /><label>Lombo</label>
    </div>
    <div class="col-md-3">
        <input value="peixes" type="checkbox" /><label>Peixes</label>
    </div>
    <div class="col-md-3">
        <input value="frango" type="checkbox" /><label>Frango</label>
    </div>
    <div class="col-md-3">
        <input value="carne-suina" type="checkbox" /><label>Carne de Suína</label>
    </div>
    <div class="col-md-3">
        <input value="carne-bovina" type="checkbox" /><label>Carne Bovina</label>
    </div>
</div> <br> <br>
<input id="printButton" type="button" value="Imprimir Lista" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.min.js"></script>

I put a console.log() only to show the capture of the div parent of the elements not checados.