{"id":548,"date":"2015-04-21T15:06:00","date_gmt":"2015-04-21T15:06:00","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=548"},"modified":"2024-08-06T05:34:19","modified_gmt":"2024-08-06T05:34:19","slug":"select-deselect-all-checkboxes-using-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/","title":{"rendered":"Select \/ Deselect All Checkboxes using jQuery"},"content":{"rendered":"<p>The <b>Select All<\/b> feature is very useful where checkboxes are provided in the user interface to select all items at once. It helps the user to check or uncheck all checkboxes at once by using the Select All element. The Select All Checkboxes functionality can be implemented easily with jQuery. You can also use pure JavaScript to implement Select All functionality without using jQuery.<\/p>\n<p>You can build a simple jQuery script to check or uncheck all checkboxes on a single click. This select all checkboxes code snippet is very useful for the element list in the webpage. In this tutorial, we will show you how to select or deselect all checkboxes on one click using jQuery.<\/p>\n<p>In this example, we will create a list of multiple checkboxes with a Select All checkbox. When the Select All checkbox is checked or unchecked, it makes the other checkboxes selected or deselected.<\/p>\n<h2>Checkbox Elements with HTML<\/h2>\n<p>First, define some elements with checkboxes and Select All checkboxes in HTML.<\/p>\n<ul>\n<li>Once the Select All checkbox is checked, all other checkboxes should be selected.<\/li>\n<li>If the Select All checkbox is unchecked, all other checkboxes should be deselected.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">ul<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"select_all\"<\/span> \/&gt;<\/span> Select All<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">ul<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"1\"<\/span>\/&gt;<\/span>Item 1<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"2\"<\/span>\/&gt;<\/span>Item 2<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"3\"<\/span>\/&gt;<\/span>Item 3<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"4\"<\/span>\/&gt;<\/span>Item 4<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"checkbox\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"5\"<\/span>\/&gt;<\/span>Item 5<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">li<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">ul<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">ul<\/span>&gt;<\/span><\/pre>\n<h2>Select All Checkboxes using jQuery<\/h2>\n<p>In this method, we will implement Select All checkbox functionality using jQuery.<\/p>\n<p><b>Include the jQuery library:<\/b><\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>The Select All checkbox has an id <code>select_all<\/code> and other checkboxes have a class <code>checkbox<\/code>. When the checkbox with the <code>select_all<\/code> ID is clicked, we will check whether it is checked or not. If <code>select_all<\/code> is checked, loop through each checkbox with the class checkbox and check all the other checkboxes. Otherwise, uncheck all the other checkboxes.<\/p>\n<ul>\n<li>When each checkbox of the items is clicked, we will check whether all the other checkboxes were checked or not, and <code>#select_all<\/code> will be changed accordingly.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(68, 68, 68);\">$(<span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(136, 136, 136);\">\/\/ Select all checkboxes<\/span>\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'#select_all'<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\r\n        <span class=\"hljs-keyword\" style=\"font-weight: 700;\">let<\/span> chk_status = <span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>.checked;\r\n\r\n        <span class=\"hljs-comment\" style=\"color: rgb(136, 136, 136);\">\/\/ Iterate all listed checkbox items<\/span>\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'.checkbox'<\/span>).each(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\r\n            <span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>.checked = chk_status;\r\n        });\r\n    });\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(136, 136, 136);\">\/\/ Check or uncheck \"select all\", if one of the listed checkbox items is checked\/unchecked<\/span>\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'.checkbox'<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\r\n        <span class=\"hljs-keyword\" style=\"font-weight: 700;\">if<\/span>($(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'.checkbox:checked'<\/span>).length == $(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'.checkbox'<\/span>).length){\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'#select_all'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(120, 169, 96);\">true<\/span>);\r\n        }<span class=\"hljs-keyword\" style=\"font-weight: 700;\">else<\/span>{\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'#select_all'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(120, 169, 96);\">false<\/span>);\r\n        }\r\n    });\r\n});<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Select All Checkboxes using JavaScript<\/h2>\n<p>In this method, we will implement Select All checkbox functionality using JavaScript.<\/p>\n<p>Here is the pure JavaScript code to select or deselect all checkboxes at once:<\/p>\n<ul>\n<li>Select the &#8220;Select All&#8221; checkbox by ID (<code>select_all<\/code>) using the getElementById() method.<\/li>\n<li>Select the listed checkbox items by class (<code>.checkbox<\/code>) using the querySelectorAll() method.<\/li>\n<li>On the &#8220;Select All&#8221; change event, iterate all the listed checkboxes using the forEach() method and check or uncheck them accordingly.<\/li>\n<li>Iterate all listed checkbox items and check or uncheck &#8220;select all&#8221;, if one of the listed checkbox items is checked\/unchecked.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(68, 68, 68);\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">let<\/span> select_all = <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'select_all'<\/span>);\r\n<span class=\"hljs-keyword\" style=\"font-weight: 700;\">let<\/span> checkboxes = <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">document<\/span>.querySelectorAll(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'.checkbox'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(136, 136, 136);\">\/\/ Select all checkboxes<\/span>\r\nselect_all.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'change'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\r\n    checkboxes.forEach(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span> (<span class=\"hljs-params\">checkbox<\/span>) <\/span>{\r\n        checkbox.checked = <span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>.checked;\r\n    }, <span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>);\r\n});\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(136, 136, 136);\">\/\/ Iterate all listed checkbox items<\/span>\r\n<span class=\"hljs-comment\" style=\"color: rgb(136, 136, 136);\">\/\/ Check or uncheck \"select all\", if one of the listed checkbox items is checked\/unchecked<\/span>\r\ncheckboxes.forEach(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span> (<span class=\"hljs-params\">checkbox<\/span>) <\/span>{\r\n    checkbox.checked = <span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>.checked;\r\n\r\n    checkbox.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'change'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"font-weight: 700;\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"font-weight: 700;\">if<\/span>(<span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>.checked == <span class=\"hljs-literal\" style=\"color: rgb(120, 169, 96);\">false<\/span>){\r\n            select_all.checked = <span class=\"hljs-literal\" style=\"color: rgb(120, 169, 96);\">false<\/span>;\r\n        }\r\n\r\n        <span class=\"hljs-keyword\" style=\"font-weight: 700;\">if<\/span>(<span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">document<\/span>.querySelectorAll(<span class=\"hljs-string\" style=\"color: rgb(136, 0, 0);\">'.checkbox:checked'<\/span>).length == checkboxes.length){\r\n            select_all.checked = <span class=\"hljs-literal\" style=\"color: rgb(120, 169, 96);\">true<\/span>;\r\n        }\r\n    });\r\n}, <span class=\"hljs-keyword\" style=\"font-weight: 700;\">this<\/span>);<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The Select All feature is very useful where checkboxes are provided in the user interface to select all items at once. It helps the user to check or uncheck all checkboxes at once by using <\/p>\n","protected":false},"author":1,"featured_media":5708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[310,121,66,16],"class_list":["post-548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-checkbox","tag-checkboxes","tag-javascript","tag-jquery","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Select \/ Deselect All Checkboxes using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"How to select\/deselect all checkboxes using jQuery - Example code snippet to check or uncheck all checkboxes on a single click using JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Select \/ Deselect All Checkboxes using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"How to select\/deselect all checkboxes using jQuery - Example code snippet to check or uncheck all checkboxes on a single click using JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-21T15:06:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-06T05:34:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Select \\\/ Deselect All Checkboxes using jQuery\",\"datePublished\":\"2015-04-21T15:06:00+00:00\",\"dateModified\":\"2024-08-06T05:34:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/\"},\"wordCount\":391,\"commentCount\":19,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png\",\"keywords\":[\"checkbox\",\"Checkboxes\",\"JavaScript\",\"jQuery\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/\",\"name\":\"Select \\\/ Deselect All Checkboxes using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png\",\"datePublished\":\"2015-04-21T15:06:00+00:00\",\"dateModified\":\"2024-08-06T05:34:19+00:00\",\"description\":\"How to select\\\/deselect all checkboxes using jQuery - Example code snippet to check or uncheck all checkboxes on a single click using JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png\",\"width\":1920,\"height\":1080,\"caption\":\"select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/select-deselect-all-checkboxes-using-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Select \\\/ Deselect All Checkboxes using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Select \/ Deselect All Checkboxes using jQuery - CodexWorld","description":"How to select\/deselect all checkboxes using jQuery - Example code snippet to check or uncheck all checkboxes on a single click using JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Select \/ Deselect All Checkboxes using jQuery - CodexWorld","og_description":"How to select\/deselect all checkboxes using jQuery - Example code snippet to check or uncheck all checkboxes on a single click using JavaScript.","og_url":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2015-04-21T15:06:00+00:00","article_modified_time":"2024-08-06T05:34:19+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Select \/ Deselect All Checkboxes using jQuery","datePublished":"2015-04-21T15:06:00+00:00","dateModified":"2024-08-06T05:34:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/"},"wordCount":391,"commentCount":19,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png","keywords":["checkbox","Checkboxes","JavaScript","jQuery"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/","url":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/","name":"Select \/ Deselect All Checkboxes using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png","datePublished":"2015-04-21T15:06:00+00:00","dateModified":"2024-08-06T05:34:19+00:00","description":"How to select\/deselect all checkboxes using jQuery - Example code snippet to check or uncheck all checkboxes on a single click using JavaScript.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png","width":1920,"height":1080,"caption":"select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/select-deselect-all-checkboxes-using-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Select \/ Deselect All Checkboxes using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/04\/select-deselect-all-checkboxes-check-uncheck-using-jquery-javascript.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-8Q","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=548"}],"version-history":[{"count":16,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/548\/revisions"}],"predecessor-version":[{"id":5707,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/548\/revisions\/5707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5708"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}