如何在html中创建一个复选框，以使用jquery隐藏/显示表中的多个列(代码片段)

Question

我对使用html和Java进行编程非常陌生，但我还是想尝试完成某些事情。我想创建一个表，其中列将显示/隐藏在与复选框的关系中。现在，这已经在这里得到了解决，但我需要更深入的东西：我需要通过一个复选框我可以显示/隐藏表的两个，三个或更多列。这是代码示例，我实际上从另一篇文章中获取，但我使用相同的结构，因此我将在此处执行复制和粘贴。

 $(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>Bill@devcurry.com</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>laura@devcurry.com</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>ram@devcurry.com</td>
    <td>345-3456-7890</td>
    </tr>
    </tbody>
    </table>

如何通过选择一个Checkbox来控制多个列的可见性？在示例中，我想删除“First Name”和“Last Name”复选框，只有一个复选框，例如“Name”来控制两列First Name和Last Name。

这是一个例子：https://jsfiddle.net/marcoud/4t8aukzz/4/