Vanilla Javascript Remove Checked Attribute

Vanilla Javascript Remove Checked Attribute

4 min read Jun 20, 2024
Vanilla Javascript Remove Checked Attribute

Cara Menghapus Atribut Checked Pada Checkbox dengan Vanilla JavaScript

Dalam pengembangan web, seringkali kita membutuhkan cara untuk memanipulasi elemen HTML secara dinamis. Salah satu contohnya adalah menghapus atribut checked dari sebuah checkbox menggunakan JavaScript. Artikel ini akan membahas cara melakukannya dengan Vanilla JavaScript tanpa menggunakan library tambahan.

Mengapa Perlu Menghapus Atribut Checked?

Penghapusan atribut checked pada checkbox berguna dalam berbagai skenario:

  • Mengatur kembali status checkbox: Saat pengguna melakukan tindakan tertentu, seperti mengklik tombol "Reset", kita mungkin perlu mengembalikan checkbox ke keadaan awal, yaitu tidak tercentang.
  • Mengelola formulir: Dalam formulir, kita bisa menggunakan JavaScript untuk mengontrol checkbox yang dipilih berdasarkan input pengguna atau kondisi tertentu.
  • Membuat interaksi yang dinamis: Menghapus atribut checked memungkinkan kita untuk membuat antarmuka pengguna yang lebih responsif dan interaktif.

Cara Menghapus Atribut Checked

Berikut beberapa metode untuk menghapus atribut checked dari sebuah checkbox:

1. Menggunakan removeAttribute()

Metode removeAttribute() adalah cara paling langsung untuk menghapus atribut dari sebuah elemen HTML.

const checkbox = document.getElementById('myCheckbox');
checkbox.removeAttribute('checked');

Kode di atas akan menghapus atribut checked dari checkbox dengan id myCheckbox.

2. Mengatur Nilai checked menjadi false

Kita juga bisa menghapus atribut checked dengan mengatur nilai properti checked menjadi false.

const checkbox = document.getElementById('myCheckbox');
checkbox.checked = false;

Kode ini akan melakukan hal yang sama dengan metode removeAttribute(), yaitu menghapus atribut checked dari checkbox.

3. Menghapus atribut checked secara langsung

Metode ini melibatkan manipulasi DOM secara langsung dengan menggunakan properti attributes dan metode remove() dari NodeList.

const checkbox = document.getElementById('myCheckbox');
checkbox.attributes.removeNamedItem('checked');

Kode ini akan menemukan atribut checked pada checkbox dan menghapusnya.

Contoh Implementasi

Berikut contoh sederhana bagaimana mengaplikasikan metode di atas dalam sebuah kode HTML dan JavaScript:




  Remove Checked Attribute



  

  

  



Kode ini akan menampilkan checkbox yang tercentang. Ketika tombol "Hapus Checked" diklik, fungsi removeChecked() akan dipanggil dan salah satu metode di atas akan digunakan untuk menghapus atribut checked dari checkbox, sehingga checkbox menjadi tidak tercentang.

Kesimpulan

Dengan memahami berbagai cara untuk menghapus atribut checked dari sebuah checkbox, kita dapat mengontrol status checkbox secara dinamis dan membangun antarmuka pengguna yang lebih interaktif. Gunakan metode yang paling sesuai dengan kebutuhan dan preferensi Anda.

Related Post