Cara memilih kotak centang di javascript

Question

<input> elemen tipe checkbox diberikan secara default sebagai kotak yang dicentang (dicentang) saat diaktifkan, seperti yang mungkin Anda lihat dalam formulir kertas resmi pemerintah. Tampilan persisnya bergantung pada konfigurasi sistem operasi tempat browser berjalan. Umumnya berbentuk bujur sangkar tetapi mungkin memiliki sudut membulat. Kotak centang memungkinkan Anda memilih nilai tunggal untuk pengiriman dalam formulir (atau tidak)

Table of Contents Show

Bagaimana cara mengambil nilai kotak centang dalam JavaScript?
Bagaimana cara memeriksa apakah kotak centang dipilih dalam JavaScript?
Bagaimana cara memilih beberapa kotak centang dalam JavaScript?
Bagaimana cara mendapatkan nilai daftar kotak centang yang dipilih dalam JavaScript?

Catatan. Tombol radio mirip dengan kotak centang, tetapi dengan perbedaan penting — tombol radio dikelompokkan menjadi satu set di mana hanya satu tombol radio yang dapat dipilih pada satu waktu, sedangkan kotak centang memungkinkan Anda untuk mengaktifkan dan menonaktifkan nilai tunggal. Di mana ada beberapa kontrol, tombol radio memungkinkan satu untuk dipilih dari semuanya, sedangkan kotak centang memungkinkan beberapa nilai untuk dipilih

String yang mewakili nilai kotak centang. Ini tidak ditampilkan di sisi klien, tetapi di server ini adalah

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

0 yang diberikan pada data yang dikirimkan dengan

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

1 kotak centang. Ambil contoh berikut

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

Dalam contoh ini, kami memiliki nama

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

2, dan nilai

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

3. Saat formulir dikirimkan, pasangan nama/nilai data akan menjadi

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

4

Jika atribut

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

0 dihilangkan, nilai default untuk kotak centang adalah

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

6, sehingga data yang dikirimkan dalam kasus tersebut adalah

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

7

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g.

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

8); the value is not submitted to the server at all. If you wanted to submit a default value for the checkbox when it is unchecked, you could include an inside the form with the same

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

1 and

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

0, generated by JavaScript perhaps.

Selain atribut umum yang dimiliki oleh semua elemen <input>, input "checkbox" mendukung atribut berikut

Atribut Boolean yang menunjukkan apakah kotak centang ini dicentang secara default (saat halaman dimuat). Itu tidak menunjukkan apakah kotak centang ini saat ini dicentang. jika status kotak centang diubah, atribut konten ini tidak mencerminkan perubahan tersebut. (Hanya atribut

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

_4

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

3 IDL yang diperbarui. )

Catatan. Tidak seperti kontrol input lainnya, nilai kotak centang hanya disertakan dalam data yang dikirimkan jika kotak centang saat ini adalah

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

3. Jika ya, maka nilai atribut

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

0 kotak centang dilaporkan sebagai nilai input. Tidak seperti browser lain, Firefox secara default mempertahankan status dinamis yang diperiksa dari <input> di seluruh pemuatan halaman. Gunakan atribut untuk mengontrol fitur ini

Atribut

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

0 adalah atribut yang dimiliki semua <input>; . ketika formulir dikirimkan, hanya kotak centang yang saat ini dicentang yang dikirimkan ke server, dan nilai yang dilaporkan adalah nilai dari atribut

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

0. Jika

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

_0 tidak ditentukan lain, itu adalah string

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

6 secara default. Hal ini ditunjukkan pada bagian di atas

Kami telah membahas penggunaan paling dasar dari kotak centang di atas. Sekarang mari kita lihat fitur dan teknik terkait kotak centang umum lainnya yang Anda perlukan

Contoh yang kita lihat di atas hanya berisi satu kotak centang; . Jika mereka sama sekali tidak terkait, maka Anda dapat menangani semuanya secara terpisah, seperti yang ditunjukkan di atas. Namun, jika semuanya terkait, semuanya tidak sesederhana itu

Misalnya, dalam demo berikut kami menyertakan beberapa kotak centang untuk memungkinkan pengguna memilih minat mereka (lihat versi lengkap di bagian ini)

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

Dalam contoh ini Anda akan melihat bahwa kami telah memberikan setiap kotak centang

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

1 yang sama. Jika kedua kotak centang dicentang dan kemudian formulir dikirimkan, Anda akan mendapatkan serangkaian pasangan nama/nilai yang dikirimkan seperti ini.

inputInstance.indeterminate = true;

_8. Saat string ini mencapai server, Anda perlu mengurainya selain sebagai array asosiatif, sehingga semua nilai, tidak hanya nilai terakhir, dari

inputInstance.indeterminate = true;

9 ditangkap. Untuk satu teknik yang digunakan dengan Python, lihat Menangani Beberapa Kotak Centang dengan Satu Variabel Sisi Server, misalnya

Untuk mencentang kotak centang secara default, berikan atribut

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

3. Lihat contoh di bawah ini

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

Dalam contoh di atas, Anda mungkin memperhatikan bahwa Anda dapat mengganti kotak centang dengan mengeklik elemen

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

1 yang terkait serta pada kotak centang itu sendiri. Ini adalah fitur yang sangat berguna dari label formulir HTML yang memudahkan untuk mengeklik opsi yang Anda inginkan, terutama pada perangkat layar kecil seperti ponsel cerdas.

Di luar aksesibilitas, ini adalah alasan bagus lainnya untuk menyiapkan elemen

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

1 dengan benar di formulir Anda

Selain status yang dicentang dan tidak dicentang, ada status ketiga yang dapat digunakan kotak centang. tak tentu. Ini adalah keadaan di mana tidak mungkin untuk mengatakan apakah item tersebut diaktifkan atau dinonaktifkan. Ini diatur menggunakan properti

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

_4 objek

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

4 melalui JavaScript (tidak dapat diatur menggunakan atribut HTML)

inputInstance.indeterminate = true;

Kotak centang dalam keadaan tak tentu memiliki garis horizontal di dalam kotak (terlihat seperti tanda hubung atau tanda minus) alih-alih tanda centang/centang di sebagian besar browser

Tidak banyak kasus penggunaan untuk properti ini. Yang paling umum adalah ketika tersedia kotak centang yang "memiliki" sejumlah sub-opsi (yang juga merupakan kotak centang). Jika semua sub-opsi dicentang, kotak centang kepemilikan juga dicentang, dan jika semuanya tidak dicentang, kotak centang kepemilikan tidak dicentang. Jika salah satu atau beberapa sub-opsi memiliki status yang berbeda dari yang lain, kotak centang pemilik berada dalam status tak tentu

Ini dapat dilihat pada contoh di bawah ini (terima kasih kepada Trik CSS untuk inspirasinya). Dalam contoh ini kami melacak bahan yang kami kumpulkan untuk resep. Saat Anda mencentang atau menghapus centang pada kotak bahan, fungsi JavaScript akan memeriksa jumlah total bahan yang diperiksa

Jika tidak ada yang dicentang, kotak centang nama resep disetel ke tidak dicentang

Jika satu atau dua dicentang, kotak centang nama resep disetel ke

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

4

Jika ketiganya dicentang, kotak centang nama resep disetel ke

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

3

Jadi dalam hal ini keadaan

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

_4 digunakan untuk menyatakan bahwa pengumpulan bahan sudah dimulai, tetapi resep belum selesai

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

Catatan. Jika Anda mengirimkan formulir dengan kotak centang tak tentu, hal yang sama terjadi jika kotak centang tidak dicentang — tidak ada data yang dikirimkan untuk mewakili kotak centang

Kotak centang mendukung validasi (ditawarkan untuk semua <input>s). Namun, sebagian besar

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

_9 akan selalu

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Coding</label>
    </div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Music</label>
    </div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Art</label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sports</label>
    </div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cooking</label>
    </div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Other</label>
      <input type="text" id="otherValue" name="other" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

0. Jika kotak centang memiliki atribut, tetapi tidak dicentang, maka

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Coding</label>
    </div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Music</label>
    </div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Art</label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sports</label>
    </div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cooking</label>
    </div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Other</label>
      <input type="text" id="otherValue" name="other" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

2 akan menjadi

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Coding</label>
    </div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Music</label>
    </div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Art</label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sports</label>
    </div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cooking</label>
    </div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Other</label>
      <input type="text" id="otherValue" name="other" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

3

Contoh berikut adalah versi tambahan dari contoh "beberapa kotak centang" yang kita lihat di atas — contoh ini memiliki lebih banyak opsi standar, ditambah kotak centang "lainnya" yang bila dicentang menyebabkan bidang teks muncul untuk memasukkan nilai untuk opsi "lainnya". Ini dicapai dengan blok JavaScript sederhana. Contoh ini juga menyertakan beberapa CSS untuk meningkatkan gaya

Bagaimana cara mengambil nilai kotak centang dalam JavaScript?

Untuk mendapatkan nilai checkbox di JavaScript, Anda bisa menggunakan “document. querySelectorAll()” untuk memilih kotak centang yang ditentukan atau “document. getElementById" untuk mendapatkan "id" terhadap setiap kotak centang yang dipilih dan menampilkan nilainya yang sesuai

Bagaimana cara memeriksa apakah kotak centang dipilih dalam JavaScript?

Dalam JavaScript, kita dapat mengakses elemen kotak centang menggunakan id, kelas, atau nama tag dan menerapkan '. dicentang' untuk elemen , yang mengembalikan benar atau salah berdasarkan kotak centang yang dicentang.

Bagaimana cara memilih beberapa kotak centang dalam JavaScript?

MultiSelect memiliki dukungan bawaan untuk memilih beberapa nilai melalui kotak centang, saat properti mode ditetapkan sebagai Kotak Centang. Untuk menggunakan kotak centang, masukkan modul CheckBoxSelection di MultiSelect .