Form Filter Selectors
Checked Inputs
':checked' matches any checkbox or radio input whose checked property is currently true, letting you find selected options directly. It updates live as the user interacts with the form, not just at page load.
Example: Checked Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" checked><input type="checkbox">
<script>
console.log($(":checked").length);
</script>
</body>
</html>Selected Options
':selected' targets <option> elements inside a <select> that are currently chosen by the user, which is the equivalent of :checked for dropdown menus. This filter only makes sense inside a select element, since plain inputs have no concept of a selected option.
Example: Selected Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select><option>A</option><option selected>B</option></select>
<script>
console.log($(":selected").text());
</script>
</body>
</html>Enabled Controls
':enabled' matches form controls that can currently accept user input, excluding any element with the disabled attribute set. It's often paired with :disabled to style or handle both states differently.
Example: Enabled Controls
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input><input disabled>
<script>
console.log($(":enabled").length);
</script>
</body>
</html>Disabled Controls
':disabled' is the mirror of :enabled -- it matches controls the user can't currently interact with, often used to visually distinguish or re-enable them via script. Disabled form controls also can't receive focus or be included when the form is submitted, which this filter helps you account for in your scripts.
Example: Disabled Controls
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input><input disabled>
<script>
console.log($(":disabled").length);
</script>
</body>
</html>Focus Filter
':focus' matches whichever single element currently has keyboard focus, useful for applying styles or logic tied to exactly the field the user is actively typing into. This is commonly used to validate or highlight whichever field a user is currently filling in, without tracking focus manually.
Example: Focus Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="a"><input id="b">
<script>
$("#a").focus();
console.log($(":focus").attr("id"));
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: