2015-09-09 59 views
1

我想打印一個特定的div有一些複選框。我正在通過jquery在頁面加載中使用從db接收的數據來檢查這些複選框。問題是當我嘗試打印div複選框保持未選中。即jquery檢查不會影響打印視圖。下面是我的代碼打印DIV,無法打印特定的div

$(function() { 
       $("#btnPrint").click(function() { 
        var contents = $("#printDiv").html(); 
        var frame1 = $('<iframe />'); 
        frame1[0].name = "frame1"; 
        $("body").append(frame1); 
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument; 
        frameDoc.document.open(); 
        //Create a new HTML document. 
        frameDoc.document.write('<html><head><title>DIV Contents</title>'); 
        frameDoc.document.write('</head><body>'); 
        //Append the external CSS file. 
        frameDoc.document.write('<link href="css/carousel.css" rel="stylesheet" type="text/css">'); 
        frameDoc.document.write('<link href="css/activities_folder.css" rel="stylesheet" type="text/css">'); 
        //Append the DIV contents. 
        frameDoc.document.write(contents); 
        frameDoc.document.write('</body></html>'); 
        frameDoc.document.close(); 
        setTimeout(function() { 
         window.frames["frame1"].focus(); 
         window.frames["frame1"].print(); 
         frame1.remove(); 
        }, 500); 
       }); 
      }); 

打印的DIV是如下,

<div id="printDiv" > 

    <p class="ques"><strong>1. Parental conflict affects children in different ways. Have you observed any of these signs in your child recently? </strong></p> 
           <ul class="filters"> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Increased anger issues" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Increased anger issues</span> 
             </label> 
            </li> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Violent or criminal behavior" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Violent or criminal behavior</span> 
             </label> 
            </li> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Depression & loneliness" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Depression & loneliness</span> 
             </label> 
            </li> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Withdrawal from friends & family" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Withdrawal from friends & family</span> 
             </label> 
            </li> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Poor academic performance" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Poor academic performance</span> 
             </label> 
            </li> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Health problems & medical conditions" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Health problems & medical conditions</span> 
             </label> 
            </li> 
            <li class="col-xs-12"> 
             <label> 
              <input type="checkbox" name="q1" value="Low self-esteem, self-worth" disabled> 
              <span class="icon"><i class="fa fa-check"></i></span> 
              <span>Low self-esteem, self-worth</span> 
             </label> 
            </li> 
           </ul> 
    </div> 
<button id="btnPrint" value="Print" class="myPrintBtn">Print</button> 

jQuery代碼檢查複選框是,

$(document).ready(function() { 
var currentAnsArray = ["Increased anger issues","Health problems & medical conditions"]; 

         $("input:checkbox[name=q1]").each(function(){ 

          for(var n=0; n < currentAnsArray.length; n++) 
          { 
           if($(this).val() == currentAnsArray[n]) 
           { 
            $(this).prop('checked', true); 
            break; 
           } 
          } 
         }); 
}); 

編輯:編輯的currentAnsArray所說的@Ovchynnykov爲更清晰的問題

請幫助..任何人?

回答

0

看來你在currentAnsArray問題,因爲其他一切工作的好與jQuery的1.11.3.min.js當我提出

var currentAnsArray = ["Increased anger issues","Health problems & medical conditions"]; 

而不是

var currentAnsArray = <?php $newArray1 = explode("|",$ans[0]); echo json_encode($newArray1); ?>; 

嘗試打印currentAnsArray在日誌中。

+0

嘿謝謝你的回覆..但currentAnsArray罰款...複選框得到檢查罰款......問題是當我嘗試打印該div,打印預覽不會顯示檢查。 – Maddy

+0

現在我明白了,但我在我的Mac上的Chrome中看到它們,可能與瀏覽器和瀏覽器不同。打印之前,您可以嘗試用圖片替換它們。 –