我想通过打印机仅打印具有复选框的图像(I want to print only images with checked checkbox by printer)

我想通过打印机仅打印具有复选框的图像(I want to print only images with checked checkbox by printer)

那里。 我想通过打印机仅打印具有复选框的图像。 如果有人选中img id = 9和8的复选框，然后单击打印类的按钮。 通过打印机打印出img id = 9和8。 你可以帮帮我吗？

<div class="container" id="main"><center><button class="btn btn-primary btn-lg print" id="print2">복사하기</button></center> <div class="profile__body"> <ul class="row first" data-bsp-ul-id="bsp-PkKH" data-bsp-ul-index="0"> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="0"><input type="checkbox"> <div class="picture-square"><img id="9" src="/uploads/static_files/uploaded/2017/%EC%BA%A1%EC%B2%98.JPG" class="img-r img-responsive"></div> </li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="1"><input type="checkbox"> <div class="picture-square"><img id="8" src="/uploads/static_files/uploaded/2017/%EC%BA%A1%EC%B2%98.jpg" class="img-r img-responsive"></div> </li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="2"><input type="checkbox"> <div class="picture-square"><img id="7" src="/uploads/static_files/uploaded/2017/ddd.JPG" class="img-r img-responsive"></div> </li><li class="clearfix visible-xs-block"></li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="3"><input type="checkbox"> <div class="picture-square"><img id="6" src="/uploads/static_files/uploaded/2017/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2017-02-05_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_7.42.33.jpg" class="img-r img-responsive"></div> </li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="4"><input type="checkbox"> <div class="picture-square"><img id="4" src="/uploads/static_files/uploaded/2017/2.JPG" class="img-r img-responsive"></div> </li> </ul> </div> </div>

这是我的js。

$(document).ready(function(){ $("#print").on('click', function(ev){ $('#main').prepend('<center><button class="btn btn-primary btn-lg print" id="print2">복사하기</button></center>') $('.post').prepend('<input type="checkbox" />'); ev.preventDefault(); }); $('input:checkbox').change(function(){ if($(this).is(":checked")){ $('img').addClass("img-print"); } else { $('img').removeClass("img-print"); } }) $("#print2").on('click', function(){ }) });

there. I want to print only images with checked checkbox by printer. if someone check checkbox of img id = 9 and 8, and then click the button that class is print. print out the img id = 9 and 8 by printer. could you help me?

<div class="container" id="main"><center><button class="btn btn-primary btn-lg print" id="print2">복사하기</button></center> <div class="profile__body"> <ul class="row first" data-bsp-ul-id="bsp-PkKH" data-bsp-ul-index="0"> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="0"><input type="checkbox"> <div class="picture-square"><img id="9" src="/uploads/static_files/uploaded/2017/%EC%BA%A1%EC%B2%98.JPG" class="img-r img-responsive"></div> </li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="1"><input type="checkbox"> <div class="picture-square"><img id="8" src="/uploads/static_files/uploaded/2017/%EC%BA%A1%EC%B2%98.jpg" class="img-r img-responsive"></div> </li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="2"><input type="checkbox"> <div class="picture-square"><img id="7" src="/uploads/static_files/uploaded/2017/ddd.JPG" class="img-r img-responsive"></div> </li><li class="clearfix visible-xs-block"></li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="3"><input type="checkbox"> <div class="picture-square"><img id="6" src="/uploads/static_files/uploaded/2017/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2017-02-05_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_7.42.33.jpg" class="img-r img-responsive"></div> </li> <li class="col-xs-4 post bspHasModal" data-bsp-li-index="4"><input type="checkbox"> <div class="picture-square"><img id="4" src="/uploads/static_files/uploaded/2017/2.JPG" class="img-r img-responsive"></div> </li> </ul> </div> </div>

this is my js.

$(document).ready(function(){ $("#print").on('click', function(ev){ $('#main').prepend('<center><button class="btn btn-primary btn-lg print" id="print2">복사하기</button></center>') $('.post').prepend('<input type="checkbox" />'); ev.preventDefault(); }); $('input:checkbox').change(function(){ if($(this).is(":checked")){ $('img').addClass("img-print"); } else { $('img').removeClass("img-print"); } }) $("#print2").on('click', function(){ }) });

最满意答案

选择所有检查的图像。

创建html（ <img src='1.jpg'/> </br> <img src='5.jpg'/> ）。

3.将html值传递给mywindow.document.write（images）; http://www.w3schools.com/code/tryit.asp?filename=FCP6E6YV4S4T

<button> print </button>

$('button').on('click',PrintElem) function PrintElem() { var images = '' $.each(selecedImages,(i,d)=>{ images += '<img src = "+d+" /> ' }); mywindow.document.write(images ); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); return true; } </script> select all images what checked.

create html (<img src='1.jpg'/> </br> <img src='5.jpg'/>).

3.pass html value to mywindow.document.write(images ); http://www.w3schools.com/code/tryit.asp?filename=FCP6E6YV4S4T

<button> print </button>

$('button').on('click',PrintElem) function PrintElem() { var images = '' $.each(selecedImages,(i,d)=>{ images += '<img src = "+d+" /> ' }); mywindow.document.write(images ); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); return true; } </script>