{"id":6766,"date":"2024-01-10T17:47:00","date_gmt":"2024-01-10T17:47:00","guid":{"rendered":"https:\/\/codehim.com\/?p=6766"},"modified":"2024-01-22T15:48:27","modified_gmt":"2024-01-22T10:48:27","slug":"toggle-select-all-checkbox-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/","title":{"rendered":"Toggle Select All Checkbox JavaScript"},"content":{"rendered":"<p>A very Simple pure JavaScript function to check all check fields. It loop through all input with type checkbox and apply checked attribute if select all checkbox checked. This JavaScript code snippet helps you to create toggle select all checkbox functionality.<\/p>\n<h2>How to Create Toggle Select all Checkbox in JavaScript<\/h2>\n<p>1. First of all, create the HTML structure as follows:<\/p>\n<pre class=\"prettyprint linenums lang-html\"> &lt;h3&gt;Check All  - Javascript&lt;\/h3&gt;\r\n&lt;div class=\"container\"&gt;\r\n&lt;input type=\"checkbox\" id=\"cc\" onclick=\"javascript:checkAll(this)\"\/&gt;\r\n&lt;label for=\"cc\"&gt;Check All&lt;\/label&gt;\r\n&lt;br \/&gt;&lt;br \/&gt;\r\n&lt;input type=\"checkbox\" id=\"c1\" \/&gt;\r\n&lt;label for=\"c1\"&gt;Checkbox 1&lt;\/label&gt;\r\n&lt;br \/&gt;\r\n&lt;input type=\"checkbox\" id=\"c2\" \/&gt;\r\n&lt;label for=\"c1\"&gt;Checkbox 2&lt;\/label&gt;\r\n&lt;br \/&gt;\r\n&lt;input type=\"checkbox\" id=\"c3\" \/&gt;\r\n&lt;label for=\"c1\"&gt;Checkbox 3&lt;\/label&gt;\r\n&lt;br \/&gt;\r\n&lt;input type=\"checkbox\" id=\"c4\" \/&gt;\r\n&lt;label for=\"c1\"&gt;Checkbox 4&lt;\/label&gt;\r\n&lt;br \/&gt;\r\n&lt;input type=\"checkbox\" id=\"c5\" \/&gt;\r\n&lt;label for=\"c1\"&gt;Checkbox 5&lt;\/label&gt;\r\n&lt;br \/&gt;  \r\n &lt;\/div&gt;<\/pre>\n<p>2. After that, add the following CSS styles to your project:<\/p>\n<pre class=\"prettyprint linenums lang-css\">body {\r\n  font-family: segoe ui;\r\n}\r\n.container{\r\n    user-select: none;\r\n}<\/pre>\n<p>3. Finally, add the following JavaScript code and done.<\/p>\n<pre class=\"prettyprint linenums lang-js\">function checkAll(o) {\r\n  var boxes = document.getElementsByTagName(\"input\");\r\n  for (var x = 0; x &lt; boxes.length; x++) {\r\n    var obj = boxes[x];\r\n    if (obj.type == \"checkbox\") {\r\n      if (obj.name != \"check\")\r\n        obj.checked = o.checked;\r\n    }\r\n  }\r\n}<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully integrated this toggle select all checkbox code snippet into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A very Simple pure JavaScript function to check all check fields. It loop through all input with type checkbox and&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6790,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-6766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Toggle Select All Checkbox JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight JavaScript code snippet to create toggle select all checkbox. You can view demo and download source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Toggle Select All Checkbox JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight JavaScript code snippet to create toggle select all checkbox. You can view demo and download source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T17:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:48:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Toggle Select All Checkbox JavaScript\",\"datePublished\":\"2024-01-10T17:47:00+00:00\",\"dateModified\":\"2024-01-22T10:48:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\"},\"wordCount\":114,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png\",\"articleSection\":[\"Text &amp; Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\",\"url\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\",\"name\":\"Toggle Select All Checkbox JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png\",\"datePublished\":\"2024-01-10T17:47:00+00:00\",\"dateModified\":\"2024-01-22T10:48:27+00:00\",\"description\":\"Here is a lightweight JavaScript code snippet to create toggle select all checkbox. You can view demo and download source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png\",\"width\":1280,\"height\":960,\"caption\":\"Toggle Select All Checkbox JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text &amp; Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Toggle Select All Checkbox JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Toggle Select All Checkbox JavaScript &#8212; CodeHim","description":"Here is a lightweight JavaScript code snippet to create toggle select all checkbox. You can view demo and download source code.","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:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Toggle Select All Checkbox JavaScript &#8212; CodeHim","og_description":"Here is a lightweight JavaScript code snippet to create toggle select all checkbox. You can view demo and download source code.","og_url":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T17:47:00+00:00","article_modified_time":"2024-01-22T10:48:27+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Toggle Select All Checkbox JavaScript","datePublished":"2024-01-10T17:47:00+00:00","dateModified":"2024-01-22T10:48:27+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/"},"wordCount":114,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png","articleSection":["Text &amp; Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/","url":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/","name":"Toggle Select All Checkbox JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png","datePublished":"2024-01-10T17:47:00+00:00","dateModified":"2024-01-22T10:48:27+00:00","description":"Here is a lightweight JavaScript code snippet to create toggle select all checkbox. You can view demo and download source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Toggle-Select-All-Checkbox-.png","width":1280,"height":960,"caption":"Toggle Select All Checkbox JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/toggle-select-all-checkbox-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text &amp; Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Toggle Select All Checkbox JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":13237,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6766"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6766\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6790"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}