Bagaimana untuk Membuat Kotak Semak Di Dalam Senarai Jatuh Turun untuk Berbilang Pilihan?

Membuat Kotak Semak Di Dalam Senarai Jatuh Turun

Apabila membuat senarai lungsur turun berbilang pilihan, matlamatnya adalah untuk membolehkan pengguna memilih berbilang pilihan daripada menu lungsur turun. Menggunakan pendekatan mudah seperti menambah di dalam hasil teg dalam kotak pilihan yang muncul di hadapan medan lungsur turun.

Untuk menangani perkara ini dan membenarkan pemilihan berbilang pilihan, pendekatan yang lebih canggih diperlukan. Berikut ialah penyelesaian yang mencipta kotak pilihan untuk setiap pilihan dalam menu lungsur:

.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');
};

<div><p>Pendekatan ini menggunakan CSS dan JavaScript untuk mencipta senarai semak berfungsi yang muncul dalam menu lungsur. Dengan mengklik pada sauh "Pilih Buah", pengguna boleh menunjukkan atau menyembunyikan senarai pilihan dan memilih berbilang buah menggunakan kotak pilihan.</p></div>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kotak Semak Di Dalam Senarai Jatuh Turun untuk Berbilang Pilihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!