HTML, CSS 및 JavaScript의 확인란이 있는 사용자 정의 다중 선택 드롭다운 체크리스트를 만드는 방법은 무엇입니까?

다중 선택 드롭다운 체크리스트 생성

드롭다운 목록을 생성할 때 사용자가 여러 옵션을 선택할 수 있도록 하는 것이 바람직한 경우가 많습니다. HTML을 사용하면 드롭다운 옵션 내에서 체크박스를 사용하여 이를 수행할 수 있습니다.

체크박스가 있는 기존 드롭다운:

추가 코드 없이 드롭다운 목록에 체크박스를 추가하는 경우 드롭다운 필드 앞에 확인란이 나타납니다. 이를 변경하려면 보다 진보된 접근 방식이 필요합니다.

사용자 정의 드롭다운 체크리스트 구현:

다음 코드 조각은 사용자 정의 드롭다운 체크리스트를 생성하는 방법을 보여줍니다.

<div>

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
};

설명:

• HTML: HTML 구조는 다음을 나타내는 앵커 요소가 있는 기본 드롭다운을 생성합니다. 드롭다운 헤더와 확인란이 있는 드롭다운 옵션이 포함된 순서가 지정되지 않은 목록.
• CSS: CSS 스타일은 확인란 스타일과 드롭다운의 표시 동작을 포함하여 드롭다운의 레이아웃과 모양을 정의합니다. 드롭다운 옵션.
• JavaScript: JavaScript 코드는 앵커 요소를 클릭할 때 드롭다운 옵션의 열기 및 닫기를 처리합니다.

위 내용은 HTML, CSS 및 JavaScript의 확인란이 있는 사용자 정의 다중 선택 드롭다운 체크리스트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!