체크박스는 훌륭한 버튼이 될 수 있습니다.

저는 체크박스를 좋아합니다. 많은 공간을 사용하지 않고도 모드를 켜고 끌 수 있는 간단한 도구를 제공합니다. 특히 버튼을 사용하는 것처럼 후프를 건너뛰지 않고 CSS로 스타일을 지정할 수 있다는 점이 마음에 듭니다.

체크박스를 버튼으로 사용하는 것을 좋아합니다. 방법은 다음과 같습니다.

체크박스는 바이너리 상태입니다. 체크 여부입니다. 따라서 이벤트 핸들러에서 상태를 읽는 대신 checked 속성을 읽는 경향이 있습니다.

이것은 무엇을 의미 하는가?

this codepen 을 살펴보십시오.



깔끔하고 작동합니다. 방법을 살펴보겠습니다.

내가 할 첫 번째 일은 내 코드에 액세스할 수 있는지 확인하는 것입니다. 그렇기 때문에 모든 확인란에는 스크린 리더와 같은 보조 기술이 무엇인지 설명하는 레이블이 필요합니다.

<input type="checkbox" id="doublewide">
<label for="doublewide">Double width</label>
<input type="checkbox" id="doublehigh"> 
<label for="doublehigh">Double height</label>
<div id="box"></div>

이것은 또한 레이블 텍스트(일반적으로 확인란보다 훨씬 큼)를 클릭할 때 확인란의 상태를 변경한다는 실제 결과를 보여줍니다. 이것은 모바일 장치에서도 많은 도움이 됩니다. 모양과 느낌의 관점에서 볼 때 더 이상 확인란이 필요하지 않으므로 화면에서 숨기도록 하겠습니다.

/* Hide checkboxes */
[type=checkbox] {
  position: absolute;
  left: -50vw;
}

레이블이 "선택되지 않음"또는 회색으로 표시되도록 스타일을 지정합니다.

label {
  background: #ccc;
  padding: 5px 10px;
  color: #333;
}

그리고 체크박스가 선택되면 색상을 지정합니다(더 부드럽게 보이도록 전환도 추가하겠습니다).

/* Selected */
[type=checkbox]:checked + label {
  background: #369;
  color: #fff;
  transition: 400ms;
}

Quick aside: you can also style them to interact to keyboard users focusing on the checkboxes and to mouse interaction on the label itself:

[type=checkbox]:focus + label {
  background: #9cf;
  color: #000;
}
[type=checkbox] + label:hover {
  background: #9cf;
  color: #000;
}

이제 JavaScript 상호 작용으로 넘어갑니다. 먼저 체크박스 DOM 요소에 대한 참조가 필요합니다(DOM을 읽는 데 비용이 많이 들기 때문에 캐시하는 것이 좋습니다).

const dw = document.querySelector('#doublewide');
const dh = document.querySelector('#doublehigh');

체크박스 중 하나를 클릭할 때마다 호출할 변경 함수를 정의합니다. 여기에서 우리는 체크박스의 체크된 상태를 읽고 그에 따라 반응합니다. 이 경우 상자의 너비를 변경합니다.

const change = _ => {
    box.style.width = dw.checked ? '100px' : '50px';
    box.style.height = dh.checked ? '100px' : '50px';
 };

마지막으로 할 일은 체크박스에 이벤트 리스너를 추가하여 변경 기능을 호출하는 것입니다.

dw.addEventListener('click', change);
dh.addEventListener('click', change);

대신 이벤트 위임을 사용하여 모든 확인란에 적용할 수도 있습니다. 그렇게 하면 많은 리스너를 추가할 필요가 없으며 체크박스를 다시 반복할 필요 없이 동적으로 체크박스를 추가 및 제거할 수 있습니다.

document.body.addEventListener('click', e => {
  if (e.target.type === 'checkbox') {
    change();
  }
})

마법 같은 것은 없지만 상태를 직접 저장하는 대신 체크된 상태를 읽고 상호 작용을 브라우저에 맡기기만 하면 된다는 사실이 정말 마음에 듭니다.


사진TeroVesalainen