Binding checkboxes in flash forms

If you ever tried to bind a checkbox in a flash form, your experience may have been something like this:

• Tried using the bind attribute: bind="{ myField.selected}" and didn't see anything happening to the checkbox.
• Tried using the bind syntax in the checked attribute: checked="{myField.selected}" or similar, only to get a ColdFusion error message: “Attribute validation error for tag CFINPUT. The value of the attribute CHECKED is invalid…”
• Finally gave up and added the action to the onchange attribute of the field you wanted to bind to:
  onchange="myCheckbox.selected= myField.selected"

While the last step works, it may mean that all other fields use the binding expect for the checkbox (you will run into other problems with radio buttons :( )

It just so happens that flash form checkboxes do not work as html checkboxes. In html we can have several checkboxes with the same name and the action page will get a list of the checked values. In flash forms, we can’t do that. If we do so, we will get the following compilation error: “id ‘nameOfCheckbox’ was already defined on line [some number]”. That means we need to have a different name for every checkbox. In the action page we get true/false depending whether the checkbox was selected or not, not the checkbox value, which is completely ignored.

Going back to the binding, we can use the “value” attribute instead and bind it to other controls. The simplest example, where the second checkbox is bound to the first one:

Note: checkbox must have a label (it won’t compile otherwise) because if there is no label, it takes the value attribute and because the value with the binding evaluates to Boolean, it won’t be accepted as a label, which should be a string.

The value should be a Boolean expression, something that is already true/false, like checkbox1.selected or something that evaluates to true/false, like myField.text == 'monkey'
That is the reason why if we want to bind to a column in a cfgrid, even if is it a Boolean column, we must write: {myGrid.selectedItem.checked=='true'}

View live example
Download source

Last note: there is a small bug if the grid is editable, but you get the idea.