HTML and CSS Reference
In-Depth Information
Listing 2-10. Change Event Handler of the Check Boxes
$("#GridView1 :checkbox[id$='chkHeader']").change(function () {
if ($("#GridView1 :checked[id $='chkHeader']").is(":checked")) {
$("#GridView1 :checkbox[id *='chkItem']").attr("checked", "checked");
else {
$("#GridView1 :checkbox[id *='chkItem']").removeAttr("checked");
The code shown in Listing 2-10 wires the change event handler for the check box in the header row. It
does so using the ends with attribute selector because at runtime, the GridView generates unique IDs for
the check boxes. While generating these unique IDs, the design-time ID set by the developer is appended
at the end of a unique string value. For example, the header check box has its ID property set to chkHeader ,
and at runtime its client-side ID becomes GridView1$ctl01$chkHeader . The change event handler of the
header check box selects all the check boxes from the GridView rows and toggles their state depending on
the header check box state. The check box state is toggled by adding or removing the checked attribute
using the jQuery attr() method.
The change event handler of all the radio buttons is wired as shown in Listing 2-11.
Listing 2-11. Change Event Handler of the Radio Buttons
$("#GridView1 :radio[id *='radItem']").change(function () {
var newId =;
$("#GridView1 :radio[id *='radItem']").each(function (index) {
if ( != newId) {
By default, radio buttons placed in a GridView aren't mutually exclusive, and you can select more than
one radio button. This happens because the GridView generates a different name for each of the radio
button rather than treating them as a group. To tackle this problem, the change event handler of the radio
buttons iterates through the radio buttons and unchecks all of them other than the one being selected. To
iterate through the radio buttons, the code uses the jQuery each() method. The each() method takes a
function that is executed on each element from the matched set. The callback function receives a zero-
based index of the current element from the matched set. To uncheck a radio button, its checked attribute
is removed using the removeAttr() method.
The change event handler of the list box displaying the cities is shown in Listing 2-12.
Listing 2-12. Change Event Handler of the List Box
$("#ListBox1").change(function () {
$("#GridView1 :input").attr("disabled", "disabled");
$("#ListBox1 option:selected").each(function () {
$("#GridView1 tr:contains('" + this.value + "')").each(function () {
$(":input", this).removeAttr("disabled");
Search WWH ::

Custom Search