我想打印只有打印机复选复选框的图像

时间:2017-02-13 12:41:50

标签: jquery checkbox printing

那里。我想打印只有打印机复选复选框的图像。 如果有人检查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(){

        })
    });

1 个答案:

答案 0 :(得分:0)

  1. 选择所有已检查的图像。
  2. 创建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>