i want to diaplay my table with checkboxes checked

See more:

ASP.NET

jQuery

print

i have a drpdown,when i select an item from ddl...the table with more checkboxes is displaying data,...i need to print the whole table along with checked checkboxes ...help me pls

this is my ddl to delect roles:

<div class="form-group">
                                <label for="RoleMaster"><span class="colorred">*</span> Role Master</label>
<%--                                            <select class="form-control input-sm" name="CustomerGroup" title="Customer Group Name" id="CustomerGroup" required="true" >
                                </select>--%>
                                <input type="text" class="form-control input-sm" placeholder="Role" name="Role" id="txtRollCode" required="true" />
                                 <input type="hidden" id="RollcodeID" />
                                <select name="RollCode" id="ddlRollCode"  class="form-control input-sm">
                                    </select>
                            </div>

This is my tables which displays data:


<div class="row">
<div class="col-md-12 col-sm-12">
<div class="box box-info">
<div class="box-header">
<h3 class="box-title">Roles Details</h3>
</div>
<div class="box-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<img src="../../Designing/images/Masters.png" />&#160;&#160;Masters
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="table-section table-responsive" id="divMasters">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<img src="../../Designing/images/Transcations.png" />&#160;&#160;Transactions
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="table-section table-responsive" id="divTransctions">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<img src="../../Designing/images/Accounts.jpg" />&#160;&#160;Accounts
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<div class="table-section table-responsive" id="divAccounts">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<img src="../../Designing/images/Reports.png" />&#160;&#160;Reports
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<div class="table-section table-responsive" id="divReports">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<img src="../../Designing/images/InventoryReports.jpg" />&#160;&#160;Inventory Reports
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<div class="table-section table-responsive" id="divInventoryReports">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingsix">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<img src="../../Designing/images/AccountingReports.png" />&#160;&#160;Accounting Reports
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix">
<div class="panel-body">
<div class="table-section table-responsive" id="divAccountingReports">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingseven">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<img src="../../Designing/images/Tools.png" />&#160;&#160;Utilities & Tools
</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingseven">
<div class="panel-body">
<div class="table-section table-responsive" id="divUtilitiesTools">
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>


My jquery code to display tables is

$(document).ready(function () {

$('#BtnPrin').click(function () {
var Masters = $('#divMasters').html();
var Transactions = $('#divTransctions').html();
var Accounts = $('#divAccounts').html();
var Reports = $('#divReports').html();
var Invreports = $('#divInventoryReports').html();
var Accreports = $('#divAccountingReports').html();
var utilities = $('#divUtilitiesTools').html();
var printWindow = window.open('', '', 'height=800', 'width=800');
printWindow.document.write('<html><head><title>print contents</title>');
printWindow.document.write('</head><body>');
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Masters</h1>');
printWindow.document.write(Masters);
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Transactions</h1>');
printWindow.document.write(Transactions);
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Accounts</h1>');
printWindow.document.write(Accounts);
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('<h1 align="center">Reports</h1>');
printWindow.document.write(Reports);
printWindow.document.write('</br>');
printWindow.document.write('</br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('<h1 align="center">Inventory reports</h1>');
printWindow.document.write(Invreports)
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Accounting reports</h1>');
printWindow.document.write(Accreports);
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Utilities & tools</h1>');
printWindow.document.write(utilities);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
});




whwn i clicking print btn it just showing empty tables with checkboxes..none of them is checked...empty..need to display table with checked checkboxes