Cannot toggle checkboxes on grid with a selectall checkbox-Collection of common programming errors

I want to be able to select/unselect checkboxes for a specific column in a grid.

It gets an error inside the JS “onUPCSelectAll” function on the eval statement as follows: JS runtime error: Object doesn’t support property or method ‘SetChecked’

During debugging, I am able to see that my id value is:

$(this)[0].id = "PrintCallbackPanel_selectAllUPCCheckBox"

My source code does indeed have this particular id set up, but, you can see where the id value actually places an “_S” onto the end of the control name.

Select/Unselect all UPC rows

The “SetChecked” method produces the following:

eval($(this)[0].id).SetChecked = function(isChecked) {
  this.SetCheckState(isChecked ? ASPxClientCheckBoxCheckState.Checked : ASPxClientCheckBoxCheckState.Unchecked);
 }

and finally, the full line produces an undefined value

?eval($(this)[0].id).SetChecked(s.GetChecked());
undefined

HTML:

HTML Grid:

JS:

function onUPCSelectAll(s, e) {
    $('[id*="selectAllUPCCheckBox"]').each(function () {
        eval($(this)[0].id).SetChecked(s.GetChecked());
    });
};

function onMPCSelectAll(s, e) {
    $('[id*="selectAllMPCCheckBox"]').each(function () {
        eval($(this)[0].id).SetChecked(s.GetChecked());
    });
};

1. You select all checkboxes’ Ids start with lower case s and you’re using a capital S in the jQuery selector.

   Change the code to:

   function onUPCSelectAll(s, e) {
                $('[id*="selectAllUPCCheckBox"]').each(function () {
                    eval($(this)[0].id).SetChecked(s.GetChecked());
                });
            };
   
            function onMPCSelectAll(s, e) {
                $('[id*="selectAllMPCCheckBox"]').each(function () {
                    eval($(this)[0].id).SetChecked(s.GetChecked());
                });
            };
   

   The selector is case sensitive.