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爲更清晰的問題
請幫助..任何人?
嘿謝謝你的回覆..但currentAnsArray罰款...複選框得到檢查罰款......問題是當我嘗試打印該div,打印預覽不會顯示檢查。 – Maddy
現在我明白了,但我在我的Mac上的Chrome中看到它們,可能與瀏覽器和瀏覽器不同。打印之前,您可以嘗試用圖片替換它們。 –