Cara menggunakan javascript checkbox checked event

The native HTML checkbox (

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

Since a checkbox is an interactive control, it must be focusable and keyboard accessible. If the role is applied to a non-focusable element, use the

<div role="checkbox"><h6>Name of my checkbox</h6></div>

The developer is required to change the value of the

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

There are some types of user interface components that, when represented in a platform accessibility API, can only contain text. Accessibility APIs do not have a way of representing semantic elements contained in a checkbox. To deal with this limitation, browsers, automatically apply role

<div role="checkbox"><h6>Name of my checkbox</h6></div>

For example, consider the following checkbox element, which contains a heading.

<div role="checkbox"><h6>Name of my checkbox</h6></div>

Because descendants of checkbox are presentational, the following code is equivalent:

<div role="checkbox"><h6 role="presentation">Name of my checkbox</h6></div>

From the assistive technology user's perspective, the heading does not exist since the previous code snippets are equivalent to the following in the accessibility tree:

<div role="checkbox">Name of my checkbox</div>

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

The value of

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

The checkbox is checked.

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

The checkbox is not checked.

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

The checkbox is partially checked, or indeterminate.

<div role="checkbox"><h6 role="presentation">Name of my checkbox</h6></div>

Used to make it focusable so the assistive technology user can tab to it and start reading right away.

KeyFunctionSpaceActivates the checkbox

Required event handlers

<div role="checkbox"><h6 role="presentation">Name of my checkbox</h6></div>

Handle mouse clicks on both the checkbox and the associated label that will change the state of the checkbox by changing the value of the

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

<div role="checkbox"><h6 role="presentation">Name of my checkbox</h6></div>

Handle the case where the user presses the Space key to change the state of the checkbox by changing the value of the

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>

The following example creates an otherwise non-semantic checkbox element using CSS and JavaScript to handle the checked or unchecked status of the element.

<span
  role="checkbox"
  id="chkPref"
  aria-checked="false"
  onclick="changeCheckbox()"
  onKeyDown="changeCheckbox(event.keyCode)"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label
  id="chk1-label"
  onclick="changeCheckbox()"
  onKeyDown="changeCheckbox(event.keyCode)"
  >Remember my preferences</label
>

[role="checkbox"] {
  padding: 5px;
}

[role="checkbox"]:focus {
  border: 2px solid #0198e1;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}

function changeCheckbox(keyCode) {
  const spacebarKeyCode = 32;
  const item = document.getElementById("chkPref");
  const checked = item.getAttribute("aria-checked");

  if (keyCode && keyCode !== spacebarKeyCode) {
    return;
  } else if (checked === "true") {
    item.setAttribute("aria-checked", "false");
  } else {
    item.setAttribute("aria-checked", "true");
  }
}

When the checkbox role is added to an element, the user agent should do the following:

• Expose the element as having a checkbox role in the operating system's accessibility API.
• When the

  <input type="checkbox" id="chk1-label" />
  <label for="chk1-label">Remember my preferences</label>
  

  0 value changes, send an accessible state changed event.

Assistive technology products should do the following:

• Screen readers should announce the element as a checkbox, and optionally provide instructions on how to activate it.

People implementing checkboxes should do the following:

• Ensure that the checkbox can be reached and interacted with by both keyboard controls and clicks
• Keep the

  <input type="checkbox" id="chk1-label" />
  <label for="chk1-label">Remember my preferences</label>
  

  0 attribute up to date following user interactions
• Provide styles that indicate when the checkbox has focus

Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and may change.

The first rule of ARIA is: if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding an ARIA role, state or property to make it accessible. As such, it is recommended to use the native HTML checkbox using form control instead of recreating a checkbox's functionality with JavaScript and ARIA.