{"id":20409710,"url":"https://github.com/sleekpanther/checkbox-toggle-selection","last_synced_at":"2025-08-10T06:06:04.353Z","repository":{"id":115108620,"uuid":"75249965","full_name":"SleekPanther/checkbox-toggle-selection","owner":"SleekPanther","description":"Invert Selection of checkboxes or radio buttons in an HTML form","archived":false,"fork":false,"pushed_at":"2017-03-16T12:01:35.000Z","size":419,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T02:43:04.360Z","etag":null,"topics":["checkbox","checkboxe-selection","group-checkboxes","jquery","noah","noah-patullo","pattullo","patullo","patulo","radio-buttons"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SleekPanther.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-01T03:08:18.000Z","updated_at":"2017-05-21T12:17:00.000Z","dependencies_parsed_at":"2023-12-03T18:00:14.762Z","dependency_job_id":null,"html_url":"https://github.com/SleekPanther/checkbox-toggle-selection","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/SleekPanther/checkbox-toggle-selection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleekPanther%2Fcheckbox-toggle-selection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleekPanther%2Fcheckbox-toggle-selection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleekPanther%2Fcheckbox-toggle-selection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleekPanther%2Fcheckbox-toggle-selection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SleekPanther","download_url":"https://codeload.github.com/SleekPanther/checkbox-toggle-selection/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleekPanther%2Fcheckbox-toggle-selection/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269683182,"owners_count":24458628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","checkboxe-selection","group-checkboxes","jquery","noah","noah-patullo","pattullo","patullo","patulo","radio-buttons"],"created_at":"2024-11-15T05:43:08.616Z","updated_at":"2025-08-10T06:06:04.203Z","avatar_url":"https://github.com/SleekPanther.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Invert Selection (Toggle Selection) Checkboxes \u0026 Radio Buttons (HTML forms)\n\nUses jQuery \u0026 JavaScript to select the opposite of any checkboxes that are currently selected\n\n## [Live Demo](https://npatullo.w3.uvm.edu/toggle/)\n![](pictures/demo1.gif)  \nThis uses PHP, but you can simply `view page source` to get a pure HTML version\n\n## jQuery Functions\n- `Invert Current Selection` (checkboxes only)\n- `Select All`\n- `Select None`\n\n`Select None` works to **deselect radio buttons**  \n**This is for mutually exclusive choices, but when the entire is question optional \u0026 you want** ***`no response`*** **to be valid**  \nThe other 2 functions *can* be used on radio buttons, but **aren't effective** since radio buttons are mutually exclusive.  \n**Results in the last radio button being selected**  \nIt doesn't break anything, just doesn't work as intended\n\nNo CSS just to make things easier to understand  \nPossible improvements could be styling the buttons\n\n## Code Details \u0026 Usage\n### jQuery Functions (General Usage)\n- jQuery functions work by taking in an input parameter which is the `name` attribute of an HTML input tag  \nThis should be the `name` **for a group of elements**  \nThe action to **select all, none, or invert** is only performed on that group\n*You should create a new different set of buttons for each group where you want the functionality*\n- The `name` attribute of each checkbox in a group **must have square brackets `[]` at the end**\n`\u003cinput type='checkbox' id='chk1' name='chkBoxes[]' value='1'\u003e`  \n`\u003cinput type='checkbox' id='chk2' name='chkBoxes[]' value='2'\u003e`  \n**Notice the `[]` in `name='chkBoxes[]'`**  \nThis puts an array of checkboxes in the `$_POST` array when the form is submitted, instead of individual checkboxes. (For easier processing)\n- [Read this article](http://www.wastedpotential.com/html-multi-checkbox-set-the-correct-way-to-group-checkboxes/) to learn about **checkbox groups**\n- **Radio buttons** are mutually exclusive by design so no need for brackets `[]`, just group them by having the **same exact `name` attribute for a group**\n- An HTML button with an `onClick` event handler must be placed on the page near the checkboxes with the **correct argument in the function call**  \n`\u003cinput type=\"button\" name=\"btnInvert\" onclick=\"invert('chkBoxes[]')\" value=\"Invert\"\u003e`  \nThis says:\n    1. Call the `invert()` function when clicked\n    2. Pass in the argument `chkBoxes[]`\n    3. Only `invert()` the checkboxes in the group `chkBoxes[]`\n- The only difference for `selectAll()` and `selectNone()` is the name of the function to call\n- **REMEMBER TO CHANGE THE INPUT PARAMETER TO THE FUNCTION FOR EACH SET OF BUTTONS YOU CREATE**  \nOtherwise clicking 1 buttong will affect multiple groups\n- \u0026nbsp;\n- jQuery functions set the **property** of an HTML input element using `item.prop(\"checked\", true);` because `item.attr('checked','checked');` doesn't work  \n`attr` updates the HTML \u0026 you can see it happen in realtime using *Inspect Element*, but the actual page doesn't change\n- `selectAll` simply adds `element.prop(\"checked\", true);` to every element in a group regardless of its current state  \nThis guarantees all items in a group are checked \u0026 it doesn't hurt to set the property to `true` if it's already `true`\n- `selectNone` is the opposite \u0026 simply sets the `property` to `false`\n- The `invert` function checks if an input is checked (true/false) \u0026 sets the new property to the opposite of its previous state by negating `true` or `false`\n- \u0026nbsp;\n- **USE `selectNone` ON RADIO BUTTONS TO \"DE-SELECT\" THE RADIO BUTTON ALTOGETHER, BUT `invert` \u0026 `selectNone` WON'T WORK FOR RADIO BUTTONS***\n\n### PHP Specific\n- Form submits to itself\n- Prints out the contents of the `$_POST` array (empty to start with since form isn't submitted)\n- Uses a `for loop` to print checkboxes \u0026 labels (or just use the HTML version)\n\n## Previous Versions (failed attempts)\nThe `attempts/` folder is a collections of my initial versions which didn't pan out\n\n### Tutorial Sources\nI cobbled together my own `invert()` function based on various sources because none of them individually was exactly what I was looking for\n- **[JQuery checkboxes inverse selection | Marko Jakic](http://markojakic.net/jquery-checkboxes-inverse-selection) Probably the most help, but added to it \u0026 expanded compact if-else form**\n- **[Stack Overflow: javascript - Why is jQuery is not checking/unchecking checkbox](http://stackoverflow.com/a/18439482) finally figured out why adding `checked` wasn't actually updating the html**\n- [Javascript-invert the CheckBoxe selection](http://www.itechies.net/tutorials/jscript/jsexample.php-pid-check-invert.htm) Older JavaScript method NOT using jQuery. 1st one I got to work at all, but didn't use much else\n- [jQuery Checkboxes: Select All, Select None, and Invert Selection](https://www.abeautifulsite.net/jquery-checkboxes-select-all-select-none-and-invert-selection) A start, but not much help\n- [Stack Overflow: jQuery hasAttr checking to see if there is an attribute on an element](http://stackoverflow.com/a/1318088) some help on checkbox event handling, but not complete\n- [CSS-Tricks: A jQuery hasAttr() Equivalent](https://css-tricks.com/snippets/jquery/make-an-jquery-hasattr/) testing if an an element has an attribute\n- [Stack Overflow: jQuery checkbox event handling](http://stackoverflow.com/a/29367737) helped when finding how to call functions\n-  \u0026nbsp;\n- [HTML Multi checkbox set - the correct way to group checkboxes | wasted potential](http://www.wastedpotential.com/html-multi-checkbox-set-the-correct-way-to-group-checkboxes/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleekpanther%2Fcheckbox-toggle-selection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsleekpanther%2Fcheckbox-toggle-selection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleekpanther%2Fcheckbox-toggle-selection/lists"}