Bagaimana untuk Membuat Kotak Semak dalam Pilihan Pilihan Menggunakan HTML, CSS dan JavaScript?

Kotak semak dalam Pilihan Pilihan: Penyelesaian Menggunakan HTML, CSS, JavaScript

Menambah kotak pilihan dalam menu pilihan pilihan secara langsung tidak boleh dilaksanakan. Walau bagaimanapun, kefungsian yang serupa boleh dicapai menggunakan penyelesaian yang melibatkan HTML, CSS dan JavaScript.

Mencipta Antara Muka

HTML dan CSS mencipta menu pilihan pilihan dengan div boleh klik tambahan yang menyembunyikan dan menunjukkan senarai kotak pilihan. Div meniru kemunculan menu pilihan pilihan dan apabila diklik, menogol keterlihatan kotak pilihan.

Logik JavaScript

Fungsi JavaScript menogol sifat paparan bagi bekas kotak semak, memastikan ia kelihatan atau tersembunyi berdasarkan interaksi pengguna dengan div kotak pilihan.

Sampel Pelaksanaan:

<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;
  }
}

Pendekatan ini menyediakan kefungsian yang diingini bagi menu pilihan pilihan dengan kotak pilihan bersepadu, menawarkan fleksibiliti yang lebih besar dalam reka bentuk borang.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kotak Semak dalam Pilihan Pilihan Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!