This package has been deprecated

Author message:

This package has been moved to @w0s/button-checkboxes

@saekitominaga/customelements-button-checkboxes-ctrl

Button to check / uncheck checkboxes group

Demo

• Demo page

Examples

<button type="button" is="x-checkboxes-ctrl"
  data-course="check"
  data-target-for="checkboxes1"
>Check all</button>
<span id="checkboxes1">
  <label><input type="checkbox"/> 1</label>
  <label><input type="checkbox"/> 2</label>
  <label><input type="checkbox"/> 3</label>
</span>

<button type="button" is="x-checkboxes-ctrl"
  data-course="check"
  data-targets-class="checkbox2"
>Check all</button>
<span>
  <label><input type="checkbox" class="checkbox2"/> 1</label>
  <label><input type="checkbox" class="checkbox2"/> 2</label>
  <label><input type="checkbox" class="checkbox2"/> 3</label>
</span>

<button type="button" is="x-checkboxes-ctrl"
  data-course="check"
  data-targets-name="checkbox3[]"
>Check all</button>
<span>
  <label><input type="checkbox" name="checkbox3[]"/> 1</label>
  <label><input type="checkbox" name="checkbox3[]"/> 2</label>
  <label><input type="checkbox" name="checkbox3[]"/> 3</label>
</span>

Attributes

type [optional]

This function automatically sets type="button". However, it is recommended to manually add type="button" for JavaScript disabled environments and browsers that do not support Customized built-in elements (Safari 16, etc.). According to the description in the HTML specification, The missing value default and invalid value default are the Submit Button state.

data-course [required]

'check' / 'uncheck'

data-target-for [conditionally required]

An ancestor element ID of the checkboxes. (At least one of the data-targets-class, data-targets-name, or this attribute is required)

data-targets-class [conditionally required]

Checkboxes class attribute value. (At least one of the data-target-for, data-targets-name, or this attribute is required)

data-targets-name [conditionally required]

Checkboxes name attribute value. (At least one of the data-target-for, data-targets-class, or this attribute is required)