{"id":1203,"date":"2012-09-18T04:06:41","date_gmt":"2012-09-18T04:06:41","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1203"},"modified":"2012-09-18T04:06:41","modified_gmt":"2012-09-18T04:06:41","slug":"jquery-count-checked-checkboxes-easily-count-checked-checkboxes","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-count-checked-checkboxes-easily-count-checked-checkboxes\/","title":{"rendered":"jQuery Count Checked Checkboxes Examples"},"content":{"rendered":"<p>Have you ever wondered how to <strong>Count Checked Checkboxes using jQuery<\/strong>? In this article, I am going to show you with easy to follow examples how to use <strong>jQuery to\u00a0Count Checked Checkboxes<\/strong> in 7 ways. I am going to discuss multiple ways to\u00a0Count Checked Checkboxes, so you can use any of the method indicated in your app. Read on to find out how you can <em><strong>easily Count Checked Checkboxes using jQuery<\/strong><\/em>.<!--more--><\/p>\n<h2>How to Easily Count Checked Checkboxes using jQuery &#8211; Examples<\/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=1203\" 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>Let&#8217;s assume that we have an array of &#8216;fruits&#8217; checkboxes. We have different values for each of these checkboxes and these set of values for the checkboxes are meant to act as an array. So we want to alert the count of the checked checkboxes when a button is clicked, using jQuery.<\/p>\n<h3>Example: Here is the full source to count checked checkboxes using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Count Checked Checkboxes Examples &lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;p&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" class=\"fruits\" value=\"apple\" id=\"fruits_0\"&gt;\nApple&lt;\/label&gt;\n&lt;br&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" class=\"fruits\" value=\"mango\" id=\"fruits_1\"&gt;\nMango&lt;\/label&gt;\n&lt;br&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" class=\"fruits\" value=\"grapes\" id=\"fruits_2\"&gt;\nGrapes&lt;\/label&gt;\n&lt;br&gt;\n&lt;\/p&gt;\n\n&lt;input type=\"submit\" name=\"btn_alert\" id=\"btn_alert\" value=\"Count Checked Checkboxes\" \/&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n$('#btn_alert').click(function(){\n\n\/\/Mehod 1\nalert( 'Checked: '+ $(\":checkbox:checked\").length );\n\n\/\/Mehod 2\nalert( 'Checked: '+ $(\"input:checkbox:checked\").length );\n\n\/\/Mehod 3 - Using class\nalert( 'Checked: '+ $(\".fruits:checked\").size() );\n\n\/\/Mehod 4 - Using class (2)\nalert( 'Checked: '+ $(\".fruits:checked\").length );\n\n\/\/Mehod 5\nalert( 'Checked: '+ $(\"[type='checkbox']:checked\").length );\n\n\/\/Mehod 6\nalert( 'Checked: '+ $(\"input:checked\").length );\n\n\/\/Mehod 7\nalert( 'Checked: '+ $(\"input[name='fruits[]']:checked\").length );\n\nreturn false;\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, tick some checkboxes &amp; click on the button. You should see 7 alerts that will alert the<strong>\u00a0checked checkboxes count<\/strong>. Now you might be wondering of all these different ways, which one would be recommended. I recommend using the following, as per the case:<\/p>\n<p><strong>RECOMMENDATIONS:<\/strong><\/p>\n<p><strong>1. If you don&#8217;t have a class applied to the checkboxes group and you want to make sure that you want to get the count for only a set of specific checkboxes array<\/strong> (assuming that there can be multiple different checkboxes array on the same page), use:<\/p>\n<pre class=\"lang:xhtml decode:true\">$(\"input[name='fruits[]']:checked\").length;<\/pre>\n<p><strong>2. If you have a class applied\u00a0to the checkboxes group then using jQuery count checked checkboxes like so:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">$(\".fruits:checked\").length;<\/pre>\n<p>I suggest using .length over .size() as it reduces the overhead of a function call. Thus using .length is faster when compared to using .size().<\/p>\n<p><strong>BONUS:<\/strong><\/p>\n<p>Ok, so far we have seen how to get count of checked checkboxes using jQuery. Now do you know <strong>how to get the count of all the checkboxes that are NOT checked using jQuery<\/strong>? Here&#8217;s how you can do it, in the above case.<\/p>\n<pre class=\"lang:xhtml decode:true\">\/\/Get count of checkboxes that were NOT checked - Using named selector\nalert( 'Not checked: '+ $(\"input[name='fruits[]']\").not(':checked').length );\n\n\/\/Get count of checkboxes that were NOT checked - Using class\nalert( 'Not checked: '+ $(\".fruits\").not(':checked').length );<\/pre>\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=1203\" 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>That&#8217;s it for now!<\/h5>\n<p>Do you know of any other ways to use j<em><strong>Query to<\/strong><\/em>\u00a0<em><strong>count checked checkboxes<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wondered how to Count Checked Checkboxes using jQuery? In this article, I am going to show you with easy to follow examples how to use jQuery to\u00a0Count Checked Checkboxes in 7 ways. I am going to discuss multiple ways to\u00a0Count Checked Checkboxes, so you can use any of the method indicated in [&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-1203","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-jp","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1203","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=1203"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1203\/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=1203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}