{"id":1267,"date":"2012-09-25T06:12:44","date_gmt":"2012-09-25T06:12:44","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1267"},"modified":"2012-09-25T06:12:44","modified_gmt":"2012-09-25T06:12:44","slug":"jquery-find-checkbox-checked-check-if-checkbox-is-checked-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-find-checkbox-checked-check-if-checkbox-is-checked-jquery\/","title":{"rendered":"jQuery Find Checkbox Checked Examples"},"content":{"rendered":"<p>While working with checkboxes and jQuery, there could be a time when you want to <strong>check if checkbox is checked or not<\/strong>. It&#8217;s quite possible that you might want to check if single checkbox is checked or an array of checkbox is checked or not. Depending upon the checked checkboxes, you may want to trigger an action, or gather the count, etc. In this article, I am going to share few examples to <em><strong>find if a checkbox is checked or not using jQuery<\/strong><\/em>. Read on to find out more.<!--more--><\/p>\n<h2>How to Check if Checkbox is Checked using jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1267\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>To find if checkbox is checked or not, there will be 2 possible cases that we will need to discuss.<\/p>\n<p>1. There could be a single checkbox\u00a0and may want to check if this single checkbox is checked or not.<\/p>\n<p>2. There\u00a0could be an array of checkbox and may want to check if each of those checkboxes are checked or not.<\/p>\n<p>For the sake of example, let&#8217;s try to deal with the first case, first.<\/p>\n<h3>Example 1: Check if Checkbox is Checked or not for Single Checkbox<\/h3>\n<p>Here is the full code (HTML + jQuery):<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Example to Check if Checkbox is Checked using jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;form name=\"form1\" method=\"post\" action=\"\"&gt;\n\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"subscribe\" class=\"subscribe\" value=\"Email\" id=\"subscribe_0\" \/&gt;\nEmail&lt;\/label&gt;\n\n&lt;\/form&gt;\n\n&lt;button id=\"check\"&gt;Check&lt;\/button&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#check').click(function() {\n\nalert( $('input[name=\"subscribe\"]').is(':checked') );\n\n});\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>When you run the above code and click on the &#8220;Check&#8221; button, &#8220;false&#8221; will be alerted. If you check the checkbox and then click on\u00a0\u00a0&#8220;Check&#8221; button, &#8220;true&#8221; will be alerted. <strong><br \/>\n<\/strong><\/p>\n<h3>Example 2: Check if Checkbox is Checked or not for Array of Checkboxes<\/h3>\n<p>Here is the full code (HTML + jQuery):<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Example to find if a Checkbox is Checked or not using jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;form name=\"form1\" method=\"post\" action=\"\"&gt;\n\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"subscribe[]\" class=\"subscribe\" value=\"Email\" id=\"subscribe_0\" \/&gt;\nEmail&lt;\/label&gt;\n&lt;br \/&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"subscribe[]\" class=\"subscribe\" value=\"SMS\" id=\"subscribe_1\" \/&gt;\nSMS&lt;\/label&gt;\n&lt;br \/&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"subscribe[]\" class=\"subscribe\" value=\"Radio\" id=\"subscribe_2\" \/&gt;\nRadio&lt;\/label&gt;\n&lt;br \/&gt;\n\n&lt;\/form&gt;\n&lt;button id=\"check\"&gt;Check&lt;\/button&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#check').click(function() {\n\n$( 'input[name=\"subscribe[]\"]' ).each(function() {\n\nif( $(this).is(':checked') )\n{\nalert( 'Checked' );\n}\nelse\n{\nalert( 'Not checked' );\n}\n\n});\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Note the usage of [] in the name of the checkbox. We are making an array of those checkboxes. So when you run the above code and click on the &#8220;Check&#8221; button, you will notice that \u00a0&#8220;Not Checked&#8221; will be alerted 3 times. This happens because we are using .each() to run through the entire array of subscribe[] checkboxes and then check whether each of them are checked or not. If you check any\/all checkbox(es) and then click on\u00a0\u00a0&#8220;Check&#8221; button, \u00a0the words &#8220;Checked&#8221; &amp; &#8220;Not Checked&#8221; will be alerted as many times as the checkboxes are checked &amp; not checked, respectively. <strong><em><br \/>\n<\/em><\/strong><\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1267\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5><b>Your Turn!<\/b><\/h5>\n<p>Do you know of any other ways to <em><strong>find if Checkbox is Checked or not using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with checkboxes and jQuery, there could be a time when you want to check if checkbox is checked or not. It&#8217;s quite possible that you might want to check if single checkbox is checked or an array of checkbox is checked or not. Depending upon the checked checkboxes, you may want to trigger [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,42,41],"class_list":["post-1267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-kr","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1267"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}