JSFiddle - React, Tailwind, and code Playground

by sunil puvvada

HTML

<table>
   <thead>
       <td>
           <input type="checkbox" checked="checked" />
       </td>
       <td>
           <input type="checkbox" checked="checked" />
       </td>
       <td>
           <input type="checkbox" checked="checked" />
       </td>
       <td>
           <input type="checkbox" checked="checked" />
       </td>
       <td>
           <input type="checkbox" checked="checked" />
       </td>
    </thead>
    <tbody>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
        <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    </tbody>
</table>

JavaScript

$(document).on('change', 'table thead input', function() {
    var checked = $(this).is(":checked");

    var index = $(this).parent().index();
        $('table tbody tr').each(function() {
            if(checked) {
                $(this).find("td").eq(index).show();   
            } else {
                $(this).find("td").eq(index).hide();   
            }
        });
});