How to hide the checkbox based on value in jQuery?

Last Updated : 25 Jul, 2024

The checkbox is used to set the content according to the user which he wants to see at the interface. Users also can set multiple choices according to their wishes.

Syntax:

$('input[name=foo]').attr('checked', false);

Approach

Integrate jQuery in HTML file via CDN Links. Includes the necessary title.
Added checkboxes above the table to toggle the visibility of the table columns.
Corrected the placement of the table headers within the <thead> tag and table rows within the <tbody> tag.
The script now toggles the visibility of columns based on the checked state of the corresponding checkboxes.
Moved the <center> tag inside the <body> tag and removed the duplicate closing tags for <head>.

Example: The example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Toggle Table Columns</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
</head>

<body>
    <center>
        <!-- Checkbox controls -->
        <label><input type="checkbox" 
                      name="Course" checked> 
          Course Name
          </label>
        <label><input type="checkbox" 
                      name="student" checked> 
          Project
          </label>
        <label><input type="checkbox" 
                      name="Tutorial" checked> 
          Geeks Course
          </label>

        <table border="1">
            <thead>
                <tr>
                    <th class="Course">Course_name</th>
                    <th class="student">project</th>
                    <th class="Tutorial">Geeks_Course</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="Course">C++</td>
                    <td class="student">face_recognition</td>
                    <td class="Tutorial">Web-development</td>
                </tr>
                <tr>
                    <td class="Course">Java</td>
                    <td class="student">
                      Handwritten_Recognition
                      </td>
                    <td class="Tutorial">
                      Placement-Series
                      </td>
                </tr>
                <tr>
                    <td class="Course">C programming</td>
                    <td class="student">To-Do list</td>
                    <td class="Tutorial">Java course</td>
                </tr>
                <tr>
                    <td class="Course">Python</td>
                    <td class="student">Chat-Bot</td>
                    <td class="Tutorial">Java-Api's</td>
                </tr>
                <tr>
                    <td class="Course">JavaScript</td>
                    <td class="student">Weather-prediction</td>
                    <td class="Tutorial">Fork-Java</td>
                </tr>
            </tbody>
        </table>

        <script>
            $("input:checkbox").click(function () {
                var shcolumn = "." + $(this).attr("name");
                $(shcolumn).toggle();
            });
        </script>
    </center>
</body>

</html>