Button to check / uncheck checkboxes group
Demo
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 addtype="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 thedata-target-for
,data-targets-name
, or this attribute is required) -
data-targets-name
[conditionally required] - Checkboxes
name
attribute value. (At least one of thedata-target-for
,data-targets-class
, or this attribute is required)