How to checked/unchecked multilevel checkboxes via jquery

<div width="100%">
<ul>
    <li><label>
    <input type="checkbox" name="checkbox" id="checkbox" />
    </label>
    <strong>Select All        </strong>
     <ul>
     <li>&nbsp;
     <input type="checkbox" name="checkbox2" id="checkbox2" />Catalog</li>
</ul>
    </li>
    <li><input type="checkbox" name="checkbox4" id="checkbox4" /> 
    <strong>Orgnisation</strong>
<ul>
    <li>
    <input type="checkbox" name="checkbox5" id="checkbox5" />
    Device</li>
    <li>
    <input type="checkbox" name="checkbox8" id="checkbox8" />
    Gadgets</li>
    <li>
    <input type="checkbox" name="checkbox9" id="checkbox9" />Pour</li>
    <li>
    <input type="checkbox" name="checkbox10" id="checkbox10" /> 
    <strong>SubOrg</strong>
<ul>
    <li>
    <input type="checkbox" name="checkbox11" id="checkbox11" />
    123              </li>
    <li>
    <input type="checkbox" name="checkbox12" id="checkbox12" />
    456</li>
    <li>
    <input type="checkbox" name="checkbox13" id="checkbox13" /> 
    789</li>
</ul>
    </li>
</ul>
    </li>
    <li><input type="checkbox" name="checkbox3" id="checkbox3" />
    <strong>Orgnisation1</strong>&nbsp;
<ul>
    <li>
    <input type="checkbox" name="checkbox6" id="checkbox6" />
    Device1</li>
    <li>
    <input type="checkbox" name="checkbox7" id="checkbox7" />
    Gadgets1</li>
    &l开发者_如何学Pythont;li>
    <input type="checkbox" name="checkbox14" id="checkbox14" />
    Pour1</li>
    <li>
    <input type="checkbox" name="checkbox15" id="checkbox15" />
    <strong>SubOrg </strong>
    <ul>
    <li>
    <input type="checkbox" name="checkbox16" id="checkbox16" />
    123a </li>
    <li>
    456a</li>
    <li>
    <input type="checkbox" name="checkbox18" id="checkbox18" />
    789a</li>
</ul>
    </li>
</ul>
    </li>
</ul>

I am newbie in JQuery field and want to achieved whatever I present in following code. It can be "N" number of level. It is just like a tree. When I click on top level(select all) its checked/unchecked all below checkbox. Whenever I click on "orgnisation" its select all below one and same for "suborg". Please help me with an example. I want a genric code if I removed one or two level I not need to modify my js file.

---

Actually, Chris Coyer of CSS-Tricks wrote a very good article about this subject. You can see it here. Example.

---

Do you mean something like this: http://jsfiddle.net/xj7NY/1/

Basically you attach the click() event to the "select all" checkbox, check you see its state (checked or not) and apply the changes to all of the checkboxes in the second container (the label element in this example) accordingly.