Checkbox HTML: Nilai Jamak, required, dan indeterminate

HTML <input type="checkbox"> memungkinkan setiap opsi dipilih atau dibersihkan secara independen. Hanya kotak yang dicentang yang mengirimkan nama dan nilainya; opsi yang tidak dicentang diabaikan dari data yang dikirimkan dan tidak dikirim sebagai false atau string kosong.

Baca beberapa nilai dengan nama yang sama

Berbeda dengan tombol radio, kotak centang dengan name yang sama dapat dipilih bersama-sama. Nilainya diulang di bawah satu nama, jadi baca semuanya. Gunakan getAll pada instance JavaScript FormData, dan periksa aturan kerangka server Anda untuk menangani beberapa nilai.

name mengidentifikasi bidang; value adalah apa yang dikirim ketika dipilih. Menghilangkan nilai menggunakan string default on, jadi tentukan nilai untuk membedakan opsi. Berikan setiap kotak centang id unik untuk labelnya.

Contoh lengkap: pemilihan ganda, pemeriksaan yang diperlukan, dan entri yang dikecualikan

Simpan kode ini sebagai checkbox-demo.html dan buka di browser. Ini menampilkan entri formulir sebenarnya alih-alih mengirimkannya ke server. Bandingkan bagaimana opsi yang dinonaktifkan dikecualikan bahkan saat dicentang.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nilai kiriman kotak centang</title>
  <style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
  <h1>Latihan kotak centang</h1>
  <form id="demo">
    <fieldset>
      <legend>Warna pilihan (boleh lebih dari satu)</legend>
      <input type="checkbox" id="blue" name="color" value="blue" checked>
      <label for="blue">Biru</label>
      <input type="checkbox" id="red" name="color" value="red">
      <label for="red">Merah</label>
      <input type="checkbox" id="locked" name="color" value="green" checked disabled>
      <label for="locked">Hijau (dinonaktifkan)</label>
    </fieldset>
    <p>
      <input type="checkbox" id="ready" name="ready" value="yes" required>
      <label for="ready">Siap berlatih (wajib)</label>
    </p>
    <button type="submit">Tampilkan nilai</button>
    <button type="reset">Atur ulang</button>
    <button type="button" id="partial">Tampilkan Biru sebagai pilihan sebagian</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    const blue = document.getElementById('blue');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    document.getElementById('partial').addEventListener('click', () => {
      blue.indeterminate = true;
    });
    form.addEventListener('reset', () => {
      result.textContent = '';
      blue.indeterminate = false;
    });
  </script>
</body>
</html>

1. Kirim tanpa memilih kotak centang kesiapan: validasi wajib mencegah pengiriman.
2. Pilih kesiapan dan Merah, lalu kirim. Output berisi color=blue, color=red, dan ready=yes; Hijau yang dinonaktifkan dikecualikan.
3. Hapus centang Biru dan Merah lalu kirim lagi. Entri color hilang dan hanya ready=yes yang tersisa.
4. Reset mengembalikan Biru dan Hijau menjadi dicentang, sedangkan Merah dan kesiapan kembali tidak dicentang.

Bedakan antara dicentang, wajib, dan tidak tentu

Atribut checked memberikan pilihan awal. Baca keadaan saat ini menggunakan properti checked di JavaScript. checked="false" masih memiliki atribut tersebut; hilangkan atribut itu untuk kotak yang awalnya tidak dicentang. Reset mengembalikan nilai awal alih-alih menghapus setiap kotak.

Sebuah kotak centang dengan required harus dicentang sendiri. Ini tidak berarti bahwa salah satu kotak centang yang memiliki nama yang sama sudah cukup. Kondisi “setidaknya satu dari ini” memerlukan validasi dan panduan terpisah.

indeterminate adalah properti JavaScript yang menampilkan status pemilihan parsial. Ini tidak diatur melalui atribut HTML dan bersifat independen dari checked, yang menentukan pengiriman. Setelah mereset, tekan tombol tampilan parsial, pilih kotak kesiapan yang diperlukan, dan periksa nilainya: biru tetap dikirim. Tampilan parsial tidak menghapus checked atau membuat nilai ketiga yang dikirim.

Menangani nilai yang hilang dan nilai ganda di server.

Menganggap setiap opsi yang tidak dicentang sebagai kesalahan, atau membaca hanya nilai terakhir dari nama yang diulang, dapat mengubah makna yang dimaksud. Bedakan "tidak ada yang dipilih" dari permintaan yang tidak valid menggunakan aturan aplikasi Anda, dan validasi nilai yang diizinkan di server.

PHP dapat menerima name="color[]" sebagai array, tetapi ini mengikuti aturan parser server. Browser tidak mengirim objek array universal untuk setiap bahasa pemrograman. Periksa bahwa nilai yang diterima adalah array, dan tangani nilai yang hilang, array bersarang, dan nilai yang tidak diizinkan. Lihat dokumentasi PHP tentang variabel eksternal untuk aturan parsing dan referensi MDN untuk perilaku kotak centang.