일반 JavaScript로 다중 입력 체크박스를 구현하는 방법은 무엇입니까?

다중 입력 체크박스 구현 방법을 배워보겠습니다. 체크박스 입력 선택기에는 다음과 같은 기능이 있습니다 -

• 체크박스를 사용하여 여러 옵션을 선택할 수 있습니다.

• 선택한 옵션은 별도의 목록으로 표시됩니다.

• 선택한 각 옵션에는 해당 옵션을 선택 취소/삭제할 수 있는 삭제 아이콘이 제공됩니다.

또 한 가지 주목해야 할 점은 이러한 기능을 구현하기 위해 타사 라이브러리를 사용하지 않고 모든 것이 HTML + JavaScript + CSS로만 작성된다는 것입니다.

방법

• 체크박스 입력에 대한 라벨로 키가 사용되고 체크된 속성으로 값(true/false)이 사용되는 객체가 있습니다.

• 그런 다음 개체의 각 키를 렌더링합니다.

• 옵션 상태가 변경될 때마다 목록을 다시 렌더링합니다.

• 마찬가지로 삭제 아이콘을 클릭하면 옵션이 업데이트되고 목록이 다시 렌더링됩니다.

예

그럼 동일한 코드를 살펴보겠습니다 -

지침

• 위의 코드는 일련의 체크박스를 표시하는 웹페이지를 생성합니다.

• 각각 다른 색상 라벨(빨간색, 녹색, 노란색 등)이 있습니다.

• 체크박스를 선택하면 해당 색상 라벨이 페이지 상단의 "홀더" div에 표시됩니다.

• 레이블에는 클릭하면 확인란의 선택이 취소되고 "홀더" div에서 레이블이 제거되는 "x"도 표시됩니다.

• 코드는 JavaScript를 사용하여 DOM을 조작하고 체크박스 선택 및 선택 취소를 처리합니다.

위 내용은 일반 JavaScript로 다중 입력 체크박스를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!