On many occasions, our web applications have toggle checkboxes that serve the purpose of activating specific actions. Checkbox toggles have a finite amount of purposes when used in this way and therefore need some JQuery or JavaScript to help manage and read their states. Each piece of demo code displayed in this tutorial will be accompanied by a live demo that you can try for yourself.

In this tutorial, we will go over the following topics and learn how to check a checkbox in JQuery and learn how to toggle them on and off too –

• Check if checkbox is checked
• How to check and uncheck a checkbox
• Listen to checkbox change

Check Checkbox Is Checked With JQuery

In this first use-case, we want to achieve the ability to read a checkboxes state as a user is using the web application. For this, JQuery can be utilized in a single line to get the value.

For each of the methods following, the same HTML will be used, a simple checkbox with some subtle bootstrap styling applied.

HTML

Method 1

Utilizing the is() method

JS

$('#cb').is(':checked');

The code above will check to see if the checkbox is ticked or not at the time of execution. If the box is ticked, true will be returned, else false will be returned.

See the demo below with the is() method within a change listener so you can see the alert when unticking and ticking the box.

See the Pen
Checkbox State Change by Danny Englishby (@DanEnglishby)
on CodePen.

Method 2

Utilizing the .prop() method with the ‘checked’ parameter passed in.

JS

$('#cb').prop('checked');

The simple one-liner above will test if the given check box is ticked, if so, true will be returned, else false.

See the demo below for .prop()

See the Pen
Checkbox State Change with prop() by Danny Englishby (@DanEnglishby)
on CodePen.

With these examples in mind, it’s super clean to test if an input tickbox is ticked or not within a logical statement. See the following JS for example –

JS

if ($('#cb').prop('checked')) {
   alert("isChecked!");
}

How To Set A Checkbox With JQuery

So, what if we want to automatically change a checkboxes state? Rather than a user clicking and checking or unchecking the box, we can use JQuery to automate this action.

Method 1

Again comes the use of the .prop() method, but this time we use a second parameter which is a boolean. You guessed it, true for tick and false for no tick!

JS

$('#cb').prop('checked', true);

// OR 

$('#cb').prop('checked', false);

If we executed the code above together, we wouldn’t see a thing happen, so let’s encapsulate them into some click handlers and use buttons to start the action! See this done below in the CodePen

See the Pen
Set Checkbox State Checked or Unchecked by Danny Englishby (@DanEnglishby)
on CodePen.

Method 2

We can also dive into the DOM itself and edit the checked value. Note: Be careful if selecting with a .class if the class name is used multiple times!

First of all, let’s log an input element to the console to see what we have to modify.

Notice the highlighted value in the orange rectangle, this is the value of interest and will give us the ability to check or uncheck the check box when modified.

So, we can modify the check value with the following JQuery.

$('#cb')[0].checked = true;

// OR

$('#cb')[0].checked = false;

Let’s put this code into some click handlers and see a demo –

See the Pen
Set Checkbox State Checked or Unchecked with the DOM by Danny Englishby (@DanEnglishby)
on CodePen.

Get Checkbox Value With JQuery

With the various methods of interacting with check boxes in mind, we can easily get the value with a single line of code.

$('#cb')[0].checked;

This could be logged to the console or stored in a variable.

For example –

var cbValue = $('#cb')[0].checked;

console.log($('#cb')[0].checked);

Listen To Checkbox Change

So, we know how to get, check and set the value of a check box, but now we want to listen to its changes. That means we can log its state at any given time the element is changed.

Method 1

One of the ways we can achieve this task is to use the .on() method with the ‘change’ parameter which we put into use earlier in this tutorial.

$('#cb').on('change', function() {
  console.log($(this)[0].checked);
});

Method 2

The second way around this task is to use the .change() function itself which is put into use just like below –

$('#cb').change(function() {
  console.log($(this)[0].checked);
});

See both of these in action in the CodePen below –

See the Pen
Checkbox Listeners by Danny Englishby (@DanEnglishby)
on CodePen.

References

Check out the documentation for the event handlers used in this on the JQuery website, see the links below –

• prop()
• on()
• change()

Summary

One of the great things about using JQuery is that there are usually a few ways of doing the same thing, therefore giving us more flexibility in our code. In this tutorial, we learned how to interact with the checkbox input element using the JQuery library, but in the next one, we will use just vanilla JavaScript!

The post JQuery Checkbox Checked – Check, Uncheck, Get & Set Value appeared first on Code Wall.