<div id="elements">
<div id="checkbox_container">
<input id="checkbox1" class="checkbox_input" type="checkbox" />
<label id="checkbox1_label" class="checkbox_label" for="checkbox1">checkbox</label>
<br />
<label id="checkbox2" class="checkbox_label">
<input class="checkbox_input" type="checkbox" />
checkbox
</label>
</div>
<div id="checkbox_msg">waiting...</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');
html,
body {
display: grid;
height: 100vh;
place-items: center;
}
#elements {
display: flex;
flex-direction: column;
width: 200px;
}
#elements > div {
margin: 10px 0;
}
#checkbox_msg,
.checkbox_label {
color: rebeccapurple;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
#checkbox1[disabled] + #checkbox1_label {
opacity: 0.5;
pointer-events: none;
}
#checkbox2.disabled {
opacity: 0.5;
pointer-events: none;
}
const checkbox_container = document.querySelector('#checkbox_container');
const checkbox_msg = document.querySelector('#checkbox_msg');
function chk_handler (e) {
if (e.target.tagName === 'LABEL' || e.target.tagName === 'INPUT') {
if (e.pointerType) {
checkbox_msg.innerText = `Pointer Event: ${e.pointerType}`;
} else if (e.code === 'Space') {
checkbox_msg.innerText = `Keyboard Event: ${e.code}`;
}
window.setTimeout(() => {
checkbox_msg.innerText = 'waiting...';
}, 2000);
}
}
checkbox_container.addEventListener('pointerup', chk_handler);
checkbox_container.addEventListener('keyup', chk_handler);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.