Skip to content

Get Value of Checkbox using jQuery

This one is quite an easy one, but a good one to mention non-the-less as it does definitely come in really handy.

If you would like to get a checkbox’s value to send to the backend using jQuery you can always do the following:

Firstly let’s draw some HTML to illustrate our example.

<input id="chkOurCheckbox" type="checkbox" />
Code language: HTML, XML (xml)

Now we need some jQuery to do the real work.

var ourCheckboxValue = ($("#chkOurCheckbox:checked").val()=="undefined") ? : 1
Code language: JavaScript (javascript)

In our above example we draw an HTML checkbox to the screen and then use jQuery to return the value of it.

Bare in mind that the $(“#chkOurCheckbox:checked”) is an object so we need to get the value of it using .val().

Also bare in mind that it can have two values, either “on” or “undefined”, “undefined” means “not checked” and “on” means checked.

We perform a short if condition on the value and if it isn’t checked(/undefined) then we set our variable to be 0, alternatively if it is set then we set our variable to 1.

We now have a variable called “ourCheckboxValue” with a boolean value of our checkbox.

See also  jQuery Colorbox not showing but background shows
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x