Skip to content
Related Articles

Related Articles

How to hide the checkbox based on value in jQuery ?
  • Last Updated : 06 Nov, 2020

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :