Change Rendering When A Box Is Ticked


I have the following problem to solve:

I have the entity Group and the entity Category. There is a n-ary relationship between them (each group can have several category, every category can be associated to several group). The category are organized hierarchically, which means i have another table in my db to tell me for every category, what is the category-child of such category.

Now i want to render the category for the group in this way:

at the beginning i have the list of the father categories (categories which are children of no-one). I have a box for every category i can tick,

when the user tick the box, a new render is displayed with the category ticked and all the children of such category. Plus i have also a button save, when pushed it saves the ticked category as category of the group in my db. I’m quite newbbie in this framework, however i read the book “Agile-Web-Development…with-Yii”, i don’t the code i need, just some advices on which direction i have to move.