HTML, CSS 및 JavaScript를 사용하여 선택 옵션 메뉴 내의 확인란을 시뮬레이션하는 방법은 무엇입니까?

선택 옵션 메뉴에 확인란 추가

사용 가능한 표준 HTML 요소를 활용하면 선택 항목 내에 확인란을 통합할 수 없습니다. 옵션 메뉴. 그러나 HTML, CSS 및 JavaScript의 도움으로 유사한 기능을 모방하는 솔루션을 만들 수 있습니다.

체크박스와 같은 선택 옵션 구현

원하는 기능을 선택하려면 다음 단계를 따르세요.

1. 선택 옵션과 숨겨진 세트를 포함하여 HTML 구조를 정의합니다.
2. CSS 스타일을 생성하여 체크박스 위치를 지정하고 숨깁니다.
3. 선택 옵션을 클릭할 때 JavaScript를 사용하여 체크박스 표시 여부를 전환합니다.

제공된 코드 조각은 이러한 구성 요소를 구성하는 방법을 보여줍니다.

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div>

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

위 내용은 HTML, CSS 및 JavaScript를 사용하여 선택 옵션 메뉴 내의 확인란을 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!