Show Hide Check boxes depending on another check boxes

I am totally new to web development so please do not leave any negative marks for this question. If you do not like this question please leave it as for another one who wish to answer.

There are 2 check box groups 'main' & 'sub.

if user select 'Main_CheckBox_1' from 'main' need to show 'Sub_Checkbox_1_Main_1' and 'Sub_Checkbox_2_Main_1' from 'sub'
and also if user select 'Main_CheckBox_2' need to show 'Sub_Checkbox_1_Main_2' & 'Sub_Checkbox_2_Main_2'

<div id = "mainDiv" >   
    <input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_1</span> <br/>
    <input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
    <input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
</div>

<div id = "subDiv" >    
    <input type="checkbox" name="sub" value="Sub_1_of_main_1"><span>Sub_Checkbox_1_Main_1</span> <br/>
    <input type="checkbox" name="sub" value="Sub_2_of_main_1"><span>Sub_Checkbox_2_Main_1</span><br/>
    <input type="checkbox" name="sub" value="Sub_1_of_main_2"><span>Sub_Checkbox_1_Main_2</span><br/>
    <input type="checkbox" name="sub" value="Sub_2_of_main_2"><span>Sub_Checkbox_2_Main_2</span><br/>
    <input type="checkbox" name="sub" value="Sub_1_of_main_3"><span>Sub_Checkbox_1_Main_3</span><br/>
    <input type="checkbox" name="sub" value="Sub_2_of_main_3"><span>Sub_Checkbox_2_Main_3</span><br/>
</div>

1. how to identify which check box is selected from 'main' ?

2. how to show/hide check boxes in 'sub' depending on 'main' check boxes ?

Thanks you