Filter jQuery adalah selektor khusus yang ditandai dengan titik dua : untuk menyaring elemen berdasarkan kondisi, posisi indeks, atau status interaktifnya.
:even dan :odd: Memilih baris tabel genap atau ganjil untuk efek zebra-striping.:checked: Mendeteksi checkbox atau radio button yang sedang dicentang pengguna.:disabled dan :enabled: Menargetkan status kontrol form formulir.<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; }
th, td { padding: 10px 14px; border: 1px solid #cbd5e1; text-align: left; }
th { background: #0d2e5c; color: white; }
button { background: #00758f; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; margin-right: 5px; }
</style>
</head>
<body>
<h3>Filter Selektor jQuery</h3>
<button id="btnZebra">Beri Zebra Striping (:odd)</button>
<button id="btnCek">Hitung Centang (:checked)</button>
<div style="margin: 15px 0;">
<label><input type="checkbox" class="cbMateri" checked> HTML5</label>
<label><input type="checkbox" class="cbMateri" checked> CSS3</label>
<label><input type="checkbox" class="cbMateri"> JavaScript</label>
<label><input type="checkbox" class="cbMateri"> jQuery</label>
<span id="labelHitung" style="margin-left: 10px; font-weight: bold; color: #00758f;"></span>
</div>
<table id="tabelSiswa">
<tr><th>No</th><th>Nama Mahasiswa</th><th>Status</th></tr>
<tr><td>1</td><td>Ahmad Faisal</td><td>Aktif</td></tr>
<tr><td>2</td><td>Siti Rahma</td><td>Aktif</td></tr>
<tr><td>3</td><td>Budi Santoso</td><td>Lulus</td></tr>
<tr><td>4</td><td>Dian Anggraini</td><td>Aktif</td></tr>
<tr><td>5</td><td>Eko Prasetyo</td><td>Lulus</td></tr>
</table>
<script>
$(document).ready(function() {
$('#btnZebra').click(function() {
$('#tabelSiswa tr:odd').css('background-color', '#f1f5f9');
});
$('#btnCek').click(function() {
const total = $('input.cbMateri:checked').length;
$('#labelHitung').text('Materi terpilih: ' + total + ' dari 4');
});
});
</script>
</body>
</html>Klik tombol untuk mengamati efek filter baris ganjil dan perhitungan dinamis elemen yang dicentang.