YouTip

## jQuery :checkbox Selector The `:checkbox` selector is a built-in jQuery selector used to target and select all `` elements that have their `type` attribute set to `"checkbox"`. --- ## Definition and Usage In HTML, checkboxes are defined using ``. The jQuery `:checkbox` selector provides a shorthand way to select these elements so you can easily manipulate them, bind event handlers, or retrieve their states (checked/unchecked). ### Syntax ```javascript $(":checkbox") ``` --- ## Code Examples ### Example 1: Basic Usage The following example demonstrates how to select all checkbox elements on a page and apply a CSS style (such as adding a red border or wrapping them) or changing their properties when a button is clicked. ```html

Newsletter Subscription

Technology

Finance

Sports

Highlight Checkbox Options ``` ### Example 2: Working with Checked States Often, you will want to select only the checkboxes that are currently checked. You can combine `:checkbox` with the `:checked` selector: ```javascript $(document).ready(function(){ $("#btn-submit").click(function(){ // Find all checked checkboxes and get their values var selectedHobbies = []; $(":checkbox:checked").each(function(){ selectedHobbies.push($(this).val()); }); alert("Selected hobbies: " + selectedHobbies.join(", ")); }); }); ``` --- ## Technical Considerations & Best Practices ### 1. Performance Optimization Because `:checkbox` is a jQuery extension and not part of the CSS specification, queries using `:checkbox` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For optimal performance in modern browsers, it is highly recommended to use standard CSS selectors instead: ```javascript // Recommended (Faster, uses native DOM query) $("input[type='checkbox']") // jQuery Extension (Slower) $(":checkbox") ``` ### 2. Selecting Checked Checkboxes If you want to target only the checkboxes that are currently ticked/checked by the user, combine the type selector with the `:checked` pseudo-class: ```javascript // Selects only checked checkboxes $("input[type='checkbox']:checked") ```