无法打印特定的div

时间:2015-09-09 04:48:39

标签: javascript html css checkbox printing

我正在尝试打印一个具有一些复选框的特定div。我正在通过jquery在页面加载时使用从db接收的数据来检查这些复选框。问题是当我尝试打印div时,复选框保持未选中状态。即jquery检查不会影响打印视图。下面是我打印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;
                                }
                            }
                        });
});

编辑:编辑@Ovchynnykov所说的currentAnsArray,以便更清楚地解决问题

请帮助..任何人???

1 个答案:

答案 0 :(得分: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。