How to create one checkbox in html to hide/show more than one column in a table using jQuery

Question

I'm very new to programming with html and Java, but I'm trying anyway to get something done. I want to create a Table where the columns will be showed/hidden in relations to a checkbox. Now, that's was already solved here, but I need something a bit further: I need that through ONE checkbox I can show/hide two, three or more columns of the table. Here is the code-example, which I actually took from another post, but I'm using the same structure, therefore I will just do the Copy and Paste here.

$(function() {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#someTable");
  var $tblhead = $("#someTable th");

  $chk.prop('checked', true);

  $chk.click(function() {
    var colToHide = $tblhead.filter("." + $(this).attr("name"));
    var index = $(colToHide).index();
    $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column&lt;</p>
<div id="grpChkBox">
  <p><input type="checkbox" name="empid"> Employee ID</p>
  <p><input type="checkbox" name="fname"> First Name</p>
  <p><input type="checkbox" name="lname"> Last Name</p>
  <p><input type="checkbox" name="email"> Email</p>
  <p><input type="checkbox" name="phone"> Phone</p>
</div>

<table id="someTable">
  <thead>
    <tr>
      <th class="empid" style="display: table-cell;">EmpId</th>
      <th class="fname" style="display: table-cell;">FirstName</th>
      <th class="lname">Last Name</th>
      <th class="email">Email</th>
      <th class="phone">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display: table-cell;">E342</td>
      <td style="display: table-cell;">Bill</td>
      <td>Evans</td>
      <td>[email protected]</td>
      <td>234-2345-2345</td>
    </tr>
    <tr>
      <td style="display: table-cell;">E343</td>
      <td style="display: table-cell;">Laura</td>
      <td>Matt</td>
      <td>[email protected]</td>
      <td>123-1234-5678</td>
    </tr>
    <tr>
      <td style="display: table-cell;">E344</td>
      <td style="display: table-cell;">Ram</td>
      <td>Kumar</td>
      <td>[email protected]</td>
      <td>345-3456-7890</td>
    </tr>
  </tbody>
</table>

How can I make that, through the selection of one Checkbox will the visibility of more then one column controlled? In the example, I would like to delete the checkbox "First Name" and "Last Name" and have just one checkbox, for example "Name" to control the two columns First Name and Last Name.

Here is the example: https://jsfiddle.net/marcoud/4t8aukzz/4/

Answer 1

One option is to have a comma separated value for the name attribute of checkboxes.

On click .split the value and do a loop to hide or show the columns.

$(function() {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#someTable");
  var $tblhead = $("#someTable th");

  $chk.prop('checked', true);

  $chk.click(function() {

    //Split the value of name
    var names = $(this).attr("name").split(",");

    //Loop thru each name
    $.each(names, function(index, value) {
      var colToHide = $tblhead.filter("." + value);
      var index = $(colToHide).index();
      $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column&lt;</p>
<div id="grpChkBox">
  <p><input type="checkbox" name="empid"> Employee ID</p>
  <p><input type="checkbox" name="fname,lname"> Name</p> <!---- Have a comma separated value for name attribute ----->
  <p><input type="checkbox" name="email"> Email</p>
  <p><input type="checkbox" name="phone"> Phone</p>
</div>

<table id="someTable">
  <thead>
    <tr>
      <th class="empid" style="display: table-cell;">EmpId</th>
      <th class="fname" style="display: table-cell;">FirstName</th>
      <th class="lname">Last Name</th>
      <th class="email">Email</th>
      <th class="phone">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display: table-cell;">E342</td>
      <td style="display: table-cell;">Bill</td>
      <td>Evans</td>
      <td>[email protected]</td>
      <td>234-2345-2345</td>
    </tr>
    <tr>
      <td style="display: table-cell;">E343</td>
      <td style="display: table-cell;">Laura</td>
      <td>Matt</td>
      <td>[email protected]</td>
      <td>123-1234-5678</td>
    </tr>
    <tr>
      <td style="display: table-cell;">E344</td>
      <td style="display: table-cell;">Ram</td>
      <td>Kumar</td>
      <td>[email protected]</td>
      <td>345-3456-7890</td>
    </tr>
  </tbody>
</table>