├── style.css ├── readme.md ├── script.js └── index.html /style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin:0; 4 | padding:0; 5 | background: #fff; 6 | } 7 | 8 | form { 9 | margin: 2em; 10 | padding: 2em; 11 | } 12 | 13 | .inputcontainer { 14 | margin : 0.5em 0; 15 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Select-all checkbox 2 | 3 | ## Post 4 | 5 | - [https://f90.co.uk/labs/select-all-checkbox/](https://f90.co.uk/labs/select-all-checkbox/) 6 | 7 | ## Example 8 | 9 | - [https://orangespaceman.github.io/select-all-checkbox](https://orangespaceman.github.io/select-all-checkbox) 10 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * form utilities 3 | * 4 | */ 5 | var formUtil = { 6 | 7 | /** 8 | * functions to clear a textbox of text 9 | * @param id string the id of the text field in question 10 | */ 11 | autoFill : function (id){ 12 | 13 | // retrieve the field, and access it's default text 14 | var field = document.getElementById(id); 15 | var defaulttext = field.value; 16 | 17 | // if default text is present when selected, hide it 18 | field.onfocus = function() { 19 | if (this.value == defaulttext) { 20 | this.value = ""; 21 | } 22 | } 23 | 24 | // if no text is entered on exit, replace default text 25 | field.onblur = function() { 26 | if (this.value == "") { 27 | this.value = defaulttext; 28 | } 29 | } 30 | }, 31 | 32 | 33 | /** 34 | * functions to select or deselect all checkboxes 35 | * @param parentcheckbox string the id of the parent check box that toggles the rest 36 | * @param childboxcontainer string the id of the html container for all child checkboxes 37 | */ 38 | toggleCheckboxes : function (parentcheckbox, childboxcontainer) { 39 | 40 | // detect when the parent checkbox value is changed 41 | var parentCheckbox = document.getElementById(parentcheckbox); 42 | parentCheckbox.onclick = function() { 43 | switchfields(this.checked); 44 | } 45 | 46 | //get child checkboxes 47 | var container = document.getElementById(childboxcontainer); 48 | var childCheckboxes = container.getElementsByTagName('input'); 49 | 50 | // traverse and check 51 | function switchfields(checkOnOff) { 52 | for (var i=0; i < childCheckboxes.length; i++) { 53 | childCheckboxes[i].checked = checkOnOff; 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Select-all checkbox 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 | Select all checkbox form 12 | 13 |
14 | 15 | 16 |
17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 |
42 | 43 | 44 | 48 | 49 | 50 | 51 | --------------------------------------------------------------------------------