@19h47/checkbox 中文文档教程

Question

@19h47/checkbox

Install

yarn add @19h47/checkbox

HTML

<div role="checkbox" aria-checked="false">
    <button type="button" tabindex="-1">Do you want to click me?</button>
    <div style="display: none;">
        <input id="option" name="option" value="false" type="checkbox" />
    </div>
</div>

JavaScript

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelector('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

Keyboard Support

Key	Function
Tab	Moves keyboard focus to the checkbox.
Space	Toggles checkbox between checked and unchecked states.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
		h3	Provides a grouping label for the group of checkboxes.
group		div	Identifies the div element as a group container for the checkboxes.
	aria-labelledby	div	The aria-labelledby attribute references the id attribute of the h3 element to define the accessible name for the group of checkboxes.
checkbox		div	Identifies the div element as a checkbox. The child text content of this div provides the accessible name of the checkbox.
	tabindex="0"	div	Includes the checkbox in the page tab sequence.
	aria-checked="false"	div	Indicates the checkbox is not checked.
	aria-checked="true"	div	Indicates the checkbox is checked.

Methods

Method	Description	Arguments
activate()	Activate the checkbox	trigger (optional) Whether or not the event should be trigger. Default to true
deactivate()	Deactivate the checkbox	trigger (optional) Whether or not the event should be trigger. Default to true

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelector('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

checkbox.activate();
checkbox.deactivate();

Event

Activate

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelectorAll('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

checkbox.$input.addEventListener('activate', event => {
    const {
        target: { value },
    } = event;

    console.log(value); // Current activate value
});

Deactivate

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelectorAll('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

checkbox.$input.addEventListener('deactivate', event => {
    const {
        target: { value },
    } = event;

    console.log(value); // Current deactivate value
});

CheckboxGroup

CheckboxGroup 是 Checkbox 的包装类。

当用户单击一个复选框，按住 Shift 键，然后单击向下几行的另一个复选框时，应选中这两个复选框之间的所有复选框。

<div role="group">
    <div tabindex="0" role="checkbox" aria-checked="false">
        <button type="button" tabindex="-1"></button>
        Curst
        <div style="display: none;">
            <input id="curst" name="curst" value="Curst" type="checkbox" />
        </div>
    </div>

    <div tabindex="0" role="checkbox" aria-checked="false">
        <button type="button" tabindex="-1"></button>
        Doppelganger, Greater
        <div style="display: none;">
            <input
                id="doppelganger-greater"
                name="city-of-splendors[]"
                value="Doppelganger, greater"
                type="checkbox"
            />
        </div>
    </div>

    <div tabindex="0" role="checkbox" aria-checked="false">
        <button type="button" tabindex="-1"></button>
        Duhlarkin
        <div style="display: none;">
            <input id="duhlarkin" name="city-of-splendors[]" value="Duhlarkin" type="checkbox" />
        </div>
    </div>
</div>

import { CheckboxGroup } from '@19h47/checkbox';

const $element = document.querySelector('[role="group"]');
const checkboxgroup = new CheckboxGroup($element);

checkbox.init();

Example

示例位于此处，请参阅来源。

References

• Checkbox Example