Column Show/Hide on Checkbox selection using jquery

Column Show/Hide on Checkbox selection using jquery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<dl class="dropdown">
  <dt>
    <a href="#" id="Sel">SELECT  
    </a>
    </dt>
  <dt>
     <ul>
<li><div>
    <input type="checkbox" value="1" id="Name"/>
    <label for="Name">Name</label>
 </div></li>
<li><div>
   <input type="checkbox" value="2" id="Address"/>
   <label for="Address">Address</label>
</div></li>
<li><div>
   <input type="checkbox" value="3" id="City"/>
   <label for="City">City</label>
</div></li>
<li><div>
    <input type="checkbox" value="4" id="Country"/>
    <label for="Country">Country</label>
</div></li>

</ul> 
    </dt>
</dl>

<table id="myTable" cellspacing="0" cellpadding="0">
  <thead>
    <tr class="headercell">
      <th>Name</th>
      <th>Address</th>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr class="datacell">
      <td>Anand</td>
      <td>2404/71</td>
      <td>Mohali</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Nilesh</td>
      <td>236/10</td>
      <td>Chandigarh</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Rahul</td>
      <td>A 71 Radhepuri</td>
      <td>New Delhi</td>
      <td>India</td>
    </tr>
    <tr>
      <td>Pratius</td>
      <td>Trishna Apartment-740</td>
      <td>Hydrabad</td>
      <td>India</td>
    </tr>
  </tbody>
</table>

CSS

body {
    font-family: calibri;
  }
  
  dt {
    display: block;
    border: 1px solid #ddd;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  table {
    padding: 0;
    border-collapse: collapse;
  }
  
  table thead td {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  
  table td {
    border: 1px solid #d7d7d7;
    padding: 5px;
  }

JavaScript

$(".dropdown ul").hide();
$('input[type="checkbox"]').attr('checked', 'checked');

$(".dropdown dt a").on('click', function() {
  $(".dropdown ul").slideToggle('fast');
});

$('input[type="checkbox"]').change(function() {
  selectedVal = $(this).closest('div').find('label').text();
  var i = $("#myTable thead .headercell th:contains(" + selectedVal + ")").index() + 1;
  $('td:nth-child(' + i + ')').toggle();
});