JQuery Selectors and Wildcards

There are times when a series of elements are on the page that have the same first few characters in an attribute, but the entire attribute cannot be used as a selector. For example, a grid that has checkboxes in the 10 rows. Each row's checkbox has an ID attribute of chkbox* where the star denotes the row number of the checkbox.

We could use the input[type=checkbox] as a selector which would be great. But what if there were other checkboxes on the page that we couldn't easily filter out. We could use wildcards in our selector.

In the above scenario, we have 20 rows and each row has a checkbox. Each checkbox has an ID attribute like this -

We can use wildcard selectors to catch all checkboxes that have chkbox in the ID attribute. Once we have them in a collection, we can do whatever we want with them.

$("[name^=chkbox]").each( function() {
	// we are looping through the collection, $(this) denotes the checkbox in the each iteration
	$(this).val("20");
})

Til next time ...