Open In App

How to hide the checkbox based on value in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

The checkbox are used to set the content according to the user which he wants to see at the interface. User also can set the multiple choices according to his wish.

Syntax:

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

In the above syntax, it returns the value of the checked or unchecked checkbox being assigned to the table box which the user selects. If the user want to see the particular content in the table box, then the user can select the checkbox associated with the column textbox which he wants.

Example: Below example illustrates the approach. It returns the value of the checkbox assigned to the table box or column using a function click(). Whenever the checkbox is checked or unchecked, it assigns the respective return value into the table box.

html




<!DOCTYPE html>
<html>
  
<head>
    <center>
        <h2>
            How to Show/Hide checkbox based 
            on value using jQuery
        </h2>
  
        <hr />
        <input type="checkbox" name="Course">Geeks_course
        <input type="checkbox" name="student"> Geeks_Student
        <input type="checkbox" name="Tutorial">Geeks_Tutorial
        <hr />
  
        <script src=
        </script>
          
        <script>
            $("input:checkbox").attr("checked", 
                    false).click(function () {
                var shcolumn = "." + $(this).attr("name");
                $(shcolumn).toggle();
  
            });
        </script>
  
</head>
  
<body>
    <table border="1">
        <tr>
            <th class="Course">Course_name</th>
            <th class="student">project</th>
            <th class="Tutorial">Geeks_Course</th>
        </tr>
        <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>
</body>
</center>
</head>
  
</html>


Output:



Last Updated : 06 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads