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();
});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;
}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>Tutorial lainnya:
Dengan menggunakan kode di atas, Anda dapat membuat checkbox dan radio button yang lebih menarik dan mudah digunakan dalam form HTML Anda.
Leave a Reply