Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HTMLMultiCheckboxElement

Provide a multi-select workflow as a grid of input checkbox elements.

internal
example

Multi-Checkbox HTML Markup

<multi-checkbox name="check-many-boxes">
  <optgroup label="Basic Options">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
  </optgroup>
  <optgroup label="Advanced Options">
   <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </optgroup>
</multi-checkbox>

Hierarchy

Index

Constructors

Methods

Properties

Accessors

Events

Constructors

constructor

Methods

_buildElements

  • _buildElements(): (HTMLFieldSetElement | HTMLLabelElement)[]

_refresh

  • _refresh(): void

_activateListeners

  • _activateListeners(): void

connectedCallback

  • connectedCallback(): void

disconnectedCallback

  • disconnectedCallback(): void

select

  • select(value: string): void

unselect

  • unselect(value: string): void

Protected _initializeOptions

  • _initializeOptions(): void

Private #buildGroup

  • #buildGroup(optgroup: HTMLOptGroupElement): HTMLFieldSetElement

  • Translate an input element into a

    of checkboxes.

    Parameters

    • optgroup: HTMLOptGroupElement

      The originally configured optgroup

    Returns HTMLFieldSetElement

    The created fieldset grouping

Private #buildOption

  • #buildOption(option: HTMLOptionElement): HTMLLabelElement

  • Build an input

    Parameters

    • option: HTMLOptionElement

      The originally configured option

    Returns HTMLLabelElement

    The created labeled checkbox element

Private #onChangeCheckbox

  • #onChangeCheckbox(event: Event): void

  • Handle changes to a checkbox input, marking the selected option as a chosen value.

    Parameters

    • event: Event

      The change event on the checkbox input element

    Returns void

Private #onFormData

  • #onFormData(event: FormDataEvent): void

Properties

form

form: HTMLFormElement = null

The form this custom element belongs to, if any.

Protected _options

_options: any[]

Predefined elements which were defined in the original HTML.

Protected _choices

_choices: Object = {}

An object which maps option values to displayed labels.

Protected _chosen

_chosen: Set<string> = ...

An array of identifiers which have been chosen.

Private #checkboxes

#checkboxes: HTMLInputElement[]

The checkbox elements used to select inputs

Private #formDataHandler

#formDataHandler: Function = null

The bound form data handler method

Accessors

name

  • get name(): string
  • set name(value: string): void

  • The name of the multi-select input element.

    Returns string

  • The name of the multi-select input element.

    Parameters

    • value: string

    Returns void

value

  • get value(): string[]
  • set value(values: string[]): void

  • The values of the multi-select input are expressed as an array of strings.

    Returns string[]

  • The values of the multi-select input are expressed as an array of strings.

    Parameters

    • values: string[]

    Returns void

Events

Static onChange

onChange: any

The "change" event is emitted when the values of the multi-select element are changed.

param event

A "change" event passed to event listeners.