{"id":5228,"date":"2022-02-04T01:00:00","date_gmt":"2022-02-04T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/jquery-checkbox-checked\/"},"modified":"2024-02-08T00:37:31","modified_gmt":"2024-02-07T23:37:31","slug":"jquery-checkbox-checked","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/jquery-checkbox-checked\/","title":{"rendered":"Check if checkbox is checked in jQuery [With Examples]"},"content":{"rendered":"

We can check the status of a checkbox by using the :checked<\/code> jQuery selector together with the jQuery function is<\/code>. For example: $('#el').is(':checked')<\/code>.<\/strong><\/p>\n

Like on many things in life, there are many ways of doing the same thing, and this case is no different. There are different ways we can check if the checkbox is checked or not, then it’s up to you to choose the one that fits your use case better.<\/p>\n

\n\t\t\t\n\t\t\t\t

\n

Actually, this same methods are exactly the same methods used to check when a radio button is checked using jQuery<\/a>.<\/p>\n<\/blockquote>\n

1. Checking if a checkbox is checked by using is<\/code><\/h2>\n

This is actually the way I would recommend for anyone using jQuery:<\/p>\n

if<\/span>( $('#el'<\/span>).is(':checked'<\/span>) ){\n    alert(\"Checkbox Is checked\"<\/span>);\n}\nelse<\/span>{\n    alert(\"Checkbox Is not checked\"<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
So here we are selecting our checkbox element with $('#el')<\/code> and asking jQuery if it matches the :checked<\/code> selector.<\/p>\n\n
So how does it work? The is<\/code> method<\/a> of jQuery provides us a way to match one or multiple elements against a given selector, jQuery object, or element. It returns true<\/code> if at least one element matches. Nice uh?<\/p>\n