hi all

this below code has 3 checkboxes.

these 3 checkboxes toggle hide/show table columns.

on page load i want to show only those columns of tables whose checkbox is checked.

if checkbox is not checked then i want to hide that column of table.

2nd checkbox is unchecked, so 2nd column of table should hide on page load by default.


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<table border="1" cellpadding="5">
        <td class="Col1">Col 1</td>
        <td class="Col2">Col 2</td>
        <td class="Col3">Col 3</td>
        <td class="Col1">text 1</td>
        <td class="Col2">text 2</td>
        <td class="Col3">text 3</td>

<br />

        <td><input name="Col1" type="checkbox" checked="checked" /></td>
        <td><input name="Col2" type="checkbox" style="margin-left:35px" /></td>
        <td><input name="Col3" type="checkbox" checked="checked" style="margin-left:35px" /></td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   var col_name = $(this).attr("name");    
        $("td[class='" + col_name + "']").show();        
        $("td[class='" + col_name + "']").hide();