선택 드롭다운 메뉴 내에서 체크박스 기능을 어떻게 시뮬레이션할 수 있나요?

선택 옵션 메뉴에 체크박스 기능 구현

선택 옵션 메뉴에 체크박스를 기본적으로 포함할 수 없음에도 불구하고 HTML을 활용하는 영리한 해결 방법이 있습니다. , CSS 및 JavaScript.

코드 구현:

1. HTML:

   • "옵션 선택" 드롭다운이 있는 다중 선택 div가 포함된 양식을 만듭니다.
   • for 속성을 사용하여 개별 체크박스 라벨이 포함된 "checkboxes"라는 숨겨진 div를 정의합니다.

2. CSS:

   • 원하는 모양에 맞게 multiselect, selectBox, overSelect 및 checkboxes 요소의 스타일을 지정합니다. 그리고 호버 효과.

3. JavaScript:

   • 클릭 시 확인란 div의 가시성을 전환하는 showCheckboxes() 함수를 정의합니다. 그만큼 selectBox.

설명:

다중 선택 div는 선택 옵션 메뉴 역할을 합니다. 클릭하면 showCheckboxes() 함수가 체크박스 div를 표시하거나 숨깁니다. 각 확인란 레이블은 드롭다운의 옵션을 나타냅니다. 라벨 위로 마우스를 가져가면 다른 색상으로 강조 표시되어 선택된 확인란과 유사한 시각적 피드백을 제공합니다.

참고:
이 솔루션을 사용하면 선택 옵션 메뉴 내에서 확인란 기능을 사용할 수 있지만, 체크박스 요소의 기본 접근성 기능을 제공하지 않습니다.

위 내용은 선택 드롭다운 메뉴 내에서 체크박스 기능을 어떻게 시뮬레이션할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!