Membuat Checkboxradio dengan jQuery

Membuat Checkboxradio dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh Membuat Checkboxradio dengan jQuery.

See the Pen Membuat Checkboxradio dengan jQuery by WebbizID (@De-Orchids) on CodePen.

jQuery

Java
$(document).ready(function() {
  // Mengubah semua input checkbox menjadi checkboxradio
  $('input[type="checkbox"]').checkboxradio();

  // Mengubah semua input radio menjadi checkboxradio
  $('input[type="radio"]').checkboxradio();
});
Java

CSS

CSS
/* Mengatur tampilan checkboxradio */
.ui-checkboxradio-label {
  display: inline-block;
  margin-right: 10px;
}

/* Mengatur tampilan checkbox */
.ui-checkboxradio-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
}

/* Mengatur tampilan checkbox yang dicentang */
.ui-checkboxradio-checked .ui-checkboxradio-icon {
  background-color: #007bff;
}

/* Mengatur tampilan radio */
.ui-checkboxradio-icon.ui-state-active {
  background-color: #007bff;
}
CSS

HTML

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Checkboxradio</title>
  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
  <form>
  <fieldset>
    <legend>Pilihan Hewan</legend>
    <label for="checkbox1">Kucing</label>
    <input type="checkbox" id="checkbox1">
    <label for="checkbox2">Anjing</label>
    <input type="checkbox" id="checkbox2">
    <label for="checkbox3">Kelinci</label>
    <input type="checkbox" id="checkbox3">
  </fieldset>

  <fieldset>
    <legend>Pilihan Warna</legend>
    <label for="radio1">Merah</label>
    <input type="radio" id="radio1" name="warna">
    <label for="radio2">Biru</label>
    <input type="radio" id="radio2" name="warna">
    <label for="radio3">Hijau</label>
    <input type="radio" id="radio3" name="warna">
  </fieldset>
</form>

</body>
</html>
HTML

Tutorial lainnya:

Dengan menggunakan kode di atas, Anda dapat membuat checkbox dan radio button yang lebih menarik dan mudah digunakan dalam form HTML Anda.

Artikel Terbaru ⭐