HTML and CSS Reference
The second form selector selects all check boxes and programmatically checks them by adding the
The click event handler of Button1 selects all the check box elements that are checked. A jQuery
selector may return zero or more elements. The total number of elements selected can be obtained using
the length property. In this case, an alert box displays the total number of check boxes that are checked.
Finally, the last alert box displays the count of all the selected options from a <select> element.
The web form shown in Figure 2-8 demonstrates a more realistic use of form selectors. The web form
shows a GridView with records from the Employees table of the Northwind database. Each row of the
GridView has a check box and a radio button to select that row. The check-box column also has a check box
in the header to toggle selection of all the check boxes. The list box at the top displays cities; if you select
one or more cities in the list box, only the employee records belonging to the selected cities are enabled.
Other records' check boxes and radio buttons are disabled. Clicking the Clear Selection button clears any
selection made in the list box and enables all the employee rows. The jQuery code responsible for this
functionality consists of four event-handler functions: the change event handler of the check boxes, the
change event handler of the radio buttons, the change event handler of the list box, and the click event
handler of the button. These event handlers are wired in the ready() function and are discussed next.
Figure 2-8. A GridView showing check boxes and radio buttons to select employee rows
Listing 2-10 shows the change event handler of the check boxes.