HTML and CSS Reference
In-Depth Information
The second form selector selects all check boxes and programmatically checks them by adding the
checked
attribute.
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.
