{"id":5230,"date":"2022-03-24T01:00:00","date_gmt":"2022-03-24T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/jquery-radio-button-checked\/"},"modified":"2024-02-08T00:38:52","modified_gmt":"2024-02-07T23:38:52","slug":"jquery-radio-button-checked","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/jquery-radio-button-checked\/","title":{"rendered":"Check If Radio Button Is Checked In jQuery [With Examples]"},"content":{"rendered":"

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

It is exactly the same method we use to check when a checkbox is checked using jQuery<\/a>.<\/p>\n

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

1. Checking If A Radio Button Is Checked By Using is<\/code><\/h2>\n

This is the best and the most recommended way when using jQuery:<\/p>\n

if<\/span>( $('#radio'<\/span>).is(':checked'<\/span>) ){\n    alert(\"Radio Button Is checked!\"<\/span>);\n}\nelse<\/span>{\n    alert(\"Radio Button Is not checked :( \"<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
So basically we do the selection of our element using $('#radio')<\/code> (assuming our element uses id=\"radio\"<\/code>) and then we ask jQuery if it matches the :checked<\/code> selector. (Which will do if the radio is active)<\/p>\n
You can play with this simple example:<\/p>\n\n
What we are doing here is making use of the jQuery is<\/code> method<\/a> to check if the provided element matches a given selector, a jQuery object, or an element. It returns true<\/code> if there’s a match. Cool uh?<\/p>\n