diff --git a/docs/examples/multi-select/index.njk b/docs/examples/multi-select/index.njk index 4ca8a2231..ffbe218a8 100644 --- a/docs/examples/multi-select/index.njk +++ b/docs/examples/multi-select/index.njk @@ -4,7 +4,7 @@ title: Multi select (example) figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type=design&node-id=841-220&mode=design --- - +
diff --git a/src/moj/all.js b/src/moj/all.js index c2584069a..73ae94cc3 100644 --- a/src/moj/all.js +++ b/src/moj/all.js @@ -15,7 +15,8 @@ MOJFrontend.initAll = function (options) { MOJFrontend.nodeListForEach($multiSelects, function ($multiSelect) { new MOJFrontend.MultiSelect({ container: $multiSelect.querySelector($multiSelect.getAttribute('data-multi-select-checkbox')), - checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input') + checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input'), + id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix'), }); }); diff --git a/src/moj/components/multi-select/README.md b/src/moj/components/multi-select/README.md index 633141df4..3e6d6755e 100644 --- a/src/moj/components/multi-select/README.md +++ b/src/moj/components/multi-select/README.md @@ -1,3 +1,3 @@ # Table multi-select -- [Guidance](https://design-patterns.service.justice.gov.uk/components/table-multi-select) +- [Guidance](https://design-patterns.service.justice.gov.uk/components/multi-select/) diff --git a/src/moj/components/multi-select/multi-select.js b/src/moj/components/multi-select/multi-select.js index b6e541c9f..646db19ff 100644 --- a/src/moj/components/multi-select/multi-select.js +++ b/src/moj/components/multi-select/multi-select.js @@ -7,7 +7,13 @@ MOJFrontend.MultiSelect = function(options) { this.container.data('moj-multi-select-initialised', true); - this.toggle = $(this.getToggleHtml()); + const idPrefix = options.id_prefix; + let allId = 'checkboxes-all'; + if (typeof idPrefix !== 'undefined') { + allId = idPrefix + 'checkboxes-all'; + } + + this.toggle = $(this.getToggleHtml(allId)); this.toggleButton = this.toggle.find('input'); this.toggleButton.on('click', $.proxy(this, 'onButtonClick')); this.container.append(this.toggle); @@ -16,11 +22,11 @@ MOJFrontend.MultiSelect = function(options) { this.checked = options.checked || false; }; -MOJFrontend.MultiSelect.prototype.getToggleHtml = function() { - var html = ''; +MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) { + let html = ''; html += '
'; - html += ' '; - html += '
';