Add Event Listener Javascript Checkbox

MUAZHAN

4 min read

·

Jun 22, 2024

38

Share

Menambahkan Event Listener pada Checkbox dengan JavaScript

Event listener pada JavaScript adalah cara yang sangat berguna untuk mendeteksi perubahan yang terjadi pada elemen HTML, termasuk checkbox. Dalam artikel ini, kita akan mempelajari cara menambahkan event listener pada checkbox dan bagaimana menangani event-event yang terjadi saat checkbox diubah.

Jenis Event pada Checkbox

Beberapa event yang umum terjadi pada checkbox adalah:

• click: Diaktivasi ketika checkbox diklik.
• change: Diaktivasi ketika status checkbox berubah (checked atau unchecked).
• input: Diaktivasi ketika nilai checkbox berubah.

Cara Menambahkan Event Listener

Ada beberapa cara untuk menambahkan event listener pada checkbox:

1. Melalui Attribute HTML:

   Dalam contoh ini, fungsi handleCheckboxChange() akan dipanggil ketika checkbox diklik.

2. Melalui JavaScript:

   const myCheckbox = document.getElementById('myCheckbox');
   myCheckbox.addEventListener('change', handleCheckboxChange);
   
   function handleCheckboxChange() {
       // Kode yang akan dijalankan ketika status checkbox berubah
       console.log('Checkbox status changed!');
   }
   

   Kode ini akan menambahkan event listener 'change' pada checkbox dengan ID 'myCheckbox'. Ketika status checkbox berubah, fungsi handleCheckboxChange() akan dipanggil.

3. Melalui jQuery:

   $('#myCheckbox').change(function() {
       // Kode yang akan dijalankan ketika status checkbox berubah
       console.log('Checkbox status changed!');
   });
   

   Kode ini menggunakan jQuery untuk menambahkan event listener 'change' pada checkbox dengan ID 'myCheckbox'.

Menangani Event pada Checkbox

Setelah event listener ditambahkan, Anda dapat menulis kode di dalam fungsi yang dipanggil untuk menangani event tersebut. Contohnya, Anda dapat menggunakan event listener 'change' untuk:

• Menampilkan/menyembunyikan elemen lain:

  const myCheckbox = document.getElementById('myCheckbox');
  const hiddenElement = document.getElementById('hiddenElement');
  
  myCheckbox.addEventListener('change', () => {
      if (myCheckbox.checked) {
          hiddenElement.style.display = 'block';
      } else {
          hiddenElement.style.display = 'none';
      }
  });
  

  Kode ini akan menampilkan elemen dengan ID 'hiddenElement' ketika checkbox dicentang, dan menyembunyikannya ketika checkbox tidak dicentang.

• Mengubah nilai input lain:

  const myCheckbox = document.getElementById('myCheckbox');
  const inputField = document.getElementById('inputField');
  
  myCheckbox.addEventListener('change', () => {
      if (myCheckbox.checked) {
          inputField.value = 'Value when checked';
      } else {
          inputField.value = 'Value when unchecked';
      }
  });
  

  Kode ini akan mengubah nilai input field dengan ID 'inputField' berdasarkan status checkbox.

• Melakukan request ke server:

  const myCheckbox = document.getElementById('myCheckbox');
  
  myCheckbox.addEventListener('change', () => {
      if (myCheckbox.checked) {
          // Kirim request ke server untuk mengupdate data
      } else {
          // Kirim request ke server untuk mengupdate data
      }
  });
  

  Kode ini akan mengirim request ke server untuk mengupdate data berdasarkan status checkbox.

Kesimpulan

Menambahkan event listener pada checkbox dengan JavaScript adalah cara yang mudah dan efisien untuk mendeteksi perubahan status checkbox dan menjalankan kode yang sesuai. Anda dapat menggunakan event listener ini untuk berbagai tujuan, mulai dari menampilkan/menyembunyikan elemen lain hingga mengirim request ke server.