How to hide the checkbox based on value in jQuery?

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>

Output:

How to hide the checkbox based on value in jQuery?

R

rohit2sahu

Improve

Article Tags :

Similar Reads

How to change the checkbox value using jQuery ?

The Checkboxes are used to let a user select one or more options for a limited number of choices. The :checkbox selector selects input elements with type checkbox.Syntax: $('#textboxID').val($("#checkboxID").is(':checked')); In the above syntax, basically the return value of the checked or unchecked

How to Check whether a Checkbox is Checked in jQuery?

We can use prop() and is() methods to check whether a checkbox is checked in jQuery. A checkbox is a user interface element that allows users to select or deselect an option. 1. Using prop() MethodThis prop() method provides a simple way to track down the status of checkboxes. It works well in every

How to find all checkbox inputs using jQuery ?

The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices. Method and Selectors used: :checkbox: This selector is used to select the input element with type = checkbox. .wrap(): This

How to Create a Toggle to Show/Hide Divs in jQuery ?

A toggle button acts like a switch to hide and show the HTML elements. If a toggle button is ON, it will show the div element. Otherwise, it will hide the element just like a switch, if it gets ON the supply will start, otherwise, it stops the supply. We can use the below approaches to create a togg

How to make a Themed Checkbox using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Themed Checkbox using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr