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>
    </tbody>
</table>

JavaScript

$(document).on('change', 'table thead input', function() {
    var checked = $(this).is(":checked");
    
    console.log(checked);
    var index = $(this).parent().index();
    if(checked) {
        $('table tbody tr td').eq(index).show();
    } else {
        $('table tbody tr td').eq(index).hide();
    }
});