How to verify if checkbox is checked in jQuery? [SOLVED]

It can be challenging to hide or show an element using jQuery checkbox checked. This tutorial teaches you how to toggle an element after checking a checkbox. We use jQuery and vanilla JavaScript.

We assume you want to hide a textbox by default and show it when a checkbox is checked. Here is the demo and summary of the resources we will use.

Before checking a checkbox

After checking a checkbox

We will use the following methods.

1. Use toggle() function

$('<checkbox selector>').click(function() {
    $("<target element selector>").toggle(this.checked)
})

2. Use is(), show() and hide() functions

$('<checkbox selector>').click(function(){
    if($(this).is(':checked')) 
    {
        $("<target element selector>").show(this.checked)
    }
    else 
    {
        $("<target element selector>").hide(this.checked)
    }
  })

3. Use vanilla JavaScript's change event

document.getElementById('<checkbox id>').onchange = function () {
    document.getElementById('<target element id>').hidden = this.checked ? false : true
}

Let's start by setting up a lab environment.

Lab environment to practice jQuery checkbox checked

We use Ubuntu and Visual Studio Code for the project.

Launch your terminal ctrl+t, create the project blueprint, and open it with Visual Studio Code.

mkdir jQueryChecked && cd jQueryChecked
touch main.js index.html
code .

We will implement the jQuery and vanilla JavaScript code in the main.js before linking the file to the index.html file.

Let's get started.

Practical examples of a jQuery checkbox checked

Here is the HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery checkbox checked</title>
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src="main.js" defer></script>
</head>
<body>
    <h1>Testing jQuery checkbox checked</h1>
    <form>
        <div>
            <label for="age_checked">Age</label>
            <input type="checkbox" id="age_checked">
        </div>
        <br>
        <input type="number" id="age_textbox" min="1" placeholder="Enter your age" hidden>
    </form>
</body>
</html>

We import jQuery version 3.6.2,

 <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>

create a form with a checkbox input of id age_checked

<input type="checkbox" id="age_checked">

and a textbox with an id called age_textbox.

<input type="number" id="age_textbox" min="1" placeholder="Enter your age" hidden>

The textbox is hidden by default. Let's show it by checking the checkbox. We also link the main.js script file before applying it, as shown below.

Example-1: Use the toggle() function

$('#age_checked').click( () => {
    $("#age_textbox").toggle(this.checked)
})

We grab the checkbox with its id. On clicking the checkbox, an arrow function runs the toggle function on the textbox. If the textbox is hidden, the toggle function shows it. Otherwise, it hides it.

Example-2: Use is() with the show() and hide() functions

$('#age_checked').click(function(){
    if($(this).is(':checked')) 
    {
        $("#age_textbox").show(this.checked)
    }
    else 
    {
        $("#age_textbox").hide(this.checked)
    }
  })

On clicking the checkbox, jQuery checks whether the checkbox is checked using the is() function. It then shows the textbox using the show() function. Otherwise, it hides it using the hide() function.

Note: if you use an arrow function, you will not achieve the intended aim because the scope the this keyword will change.

Those are the common ways to use the jQuery checkbox. Alternatively, you can do away with jQuery and use vanilla JavaScript, as shown below.

Let's do that right away.

Example-3: Use vanilla JavaScript instead

The JavaScript language has evolved so much that it now simplifies most of the things you would do with jQuery. For instance, we can achieve the same effect as the above jQuery code in four or fewer lines of vanilla JavaScript code.

const ageCheckbox = document.getElementById('age_checked')
const ageInput = document.getElementById('age_textbox')

ageCheckbox.onchange = function () {
    ageInput.hidden = this.checked ? false : true
}

We grab the checkbox and textbox. We then listen for a change event on the checkbox. If the checkbox is checked, we uncheck it. Otherwise, we check it. We achieve the toggle effect using the ternary operator.

this.checked ? false : true

Conclusion

You can achieve the jQuery checkbox checked effect by combining multiple jQuery functions. Some of the functions include click(), toggle(), is(), hide(), and show(). Alternatively, you can use vanilla JavaScript, as shown in this tutorial.