Understanding jQuery took great amount of time and effort. To understand it better, it was attempted to implement checking/unchecking of check boxes and control it with another checkbox named 'All'. Complete code is pasted here to make it beneficial to fellow Smalltalkers who are trying to learn jQuery or trying to implement similar logic. Hope this example can serve the intended purpose.

WAComponent subclass: #CheckBoxExample

instanceVariableNames: 'cbAll options'

classVariableNames: ''

poolDictionaries: ''

category: 'Mohan Workbench - Check Box'

CheckBoxExample >> cbAll

^ cbAll

CheckBoxExample >> cbAll: anObject

cbAll := anObject.

Transcript cr; show: 'cbAll is ', anObject printString

CheckBoxExample >> options

^ options

CheckBoxExample >> options: anObject

options := anObject

CheckBoxExample >> optionsAt: index put: boolean

self options at: index put: boolean.

Transcript

cr;

show: 'Option '

, index printString

, ' is '

, boolean printString

CheckBoxExample >> cbAllChanged

1 to: self options size do:[:each |

self optionsAt: each put: self cbAll]

CheckBoxExample >> initialize

super initialize.

cbAll := false.

options := OrderedCollection new.

options

add: false;

add: false;

add: false;

add: false;

add: false;

add: false;

add: false

CheckBoxExample >> renderContentOn: html

"This example is intended to show implementation of checkboxes in records selection."

"In typical list implementation, there can be a 'All' checkbox to select all records with single click and a checkbox for each record for individual selection of records."

"In such cases, there are four possible scenarios of checked status of these checkboxes"

"Scenario 1: When 'All' checkbox is checked by user, checkboxes for records should also checked programatically"

"Scenario 2: When 'All' checkbox is unchecked by user, checkboxes for records should also unchecked programatically"

"Scenario 3: 'All' checkbox and all checkboxes for records are checked; now user uncheck checkbox for a record, then 'All' checkbox should be unchecked programatically"

"Scenario 4: When all checkboxes for record are checked by user, 'All' checkbox should also be checked programatically"

"this example shows implementation of these four scenarios"

self renderCBAllOn: html.

self renderCBOptionsOn: html

CheckBoxExample >> renderCBAllOn: html

html label with: 'Check Box All'.

html checkbox

id: #checkboxAll;

value: self cbAll;

callback:[:value |

self cbAll: value.

self cbAllChanged];

onChange: html jQuery ajax serializeThisWithHidden;

"the above statement ensures server side update of cbAll instance variable"

onClick: ((html jQuery this propertyAt: 'checked')

"when 'cbAll' is clicked, check whether it is checked or not"

"Scenario 1: if cbAll is checked, then all checkboxes under div are checked using the below statement"

then: ((html jQuery: 'div :checkbox')

do:[:each | each propertyAt: 'checked' put: true])

"Scenario 2: if cbAll is unchecked, then all checkboxes under div are unchecked using the below statement"

else: ((html jQuery: 'div :checkbox')

do:[:each | each propertyAt: 'checked' put: false])).

html break

CheckBoxExample >> renderCBOptionsOn: html

html div:[

1 to: self options size do:[:each |

html label: 'Option ', each printString.

html checkbox

value: (self options at: each);

callback:[:value |

self optionsAt: each put: value];

onChange: html jQuery ajax serializeThisWithHidden.

"the above statement enables server side update of respective variable"

html break.

]

];

script: ((html jQuery: 'div')

onClick: (

"on click of any checkboxes under div, following code is executed"

"Scenario 3: checkbox named 'checkboxAll' is checked by below code if all checkboxes under div are checked"

"Scenario 4: if any one of the checkboxes under div is unchecked by user, then 'checkboxAll' is unchecked by the below code"

(html jQuery: #checkboxAll)

propertyAt: 'checked'

"in the below statement, a function with two parameters a and b is defined to compare equality and return a boolean value"

put: (('return a == b' asFunction: #(a b))

call: nil

"count on number checkboxes under div is passed as first parameter"

with: ((html jQuery: 'div :checkbox') length)

"count on number of checked checkboxes under div is passed as second parameter"

with: ((html jQuery: 'div :checkbox:checked') length))))

CheckBoxExample class >> canBeRoot

^true

CheckBoxExample class >> initialize

"self initialize"

(WAAdmin register: self asApplicationAt: 'Check Box Example')

addLibrary: JQDeploymentLibrary;

addLibrary: JQUiDeploymentLibrary.! !