:checkboxS2C Home « Selectors « :checkbox
Form checkbox selector.
Shorthand version $(':checkbox')
Description
The :checkbox selector, selects all elements of type 'checkbox'.
Being a jQuery extension the :checkbox pseudo selector is not part of any current CSS specification. Therefore :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
The same results can be achieved with valid CSS using $('[type=checkbox]'), without the hit to performance.
If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the example below to narrow the search and improve performance.
Syntax
| Signature | Description |
|---|---|
jQuery(':checkbox') | Form checkbox pseudo-class match |
Parameters
None.
Return
N/A.
:checkbox ExampleTop
Selects all elements of type checkbox.
In the example below we apply a red border to 'checkbox' elements within the form.
$(function(){
$('.ourform').submit(function () { return false; }); // disable submit
$('#btn1').on('click', function() {
$('form input:checkbox').wrap('<span></span>')
.parent().css('border', '1px solid red');
});
});