ผมอยากให้มีปุ่ม checkbox เพื่อเลือกให้ ซ่อน/แสดง 2 ตารางท้าย จากโค้ด html ด้านล้าง ไม่ทราบว่าต้องเขียนโค้ดด้วย jQuery อย่างไรครับ

<table name="steep_m_sub_drivers" class="steep_m_sub_drivers table table-bordered table-striped">
    <thead>
        <tr>
            <th rowspan="2">Key Drivers</th>
            <th rowspan="2">Sub Drivers<span class="red">*</span></th>
            <th rowspan="4"><div align="left">Relative <br />Importance <span class="red">*</span></div></th>  
            <th  width="100" colspan="5" class="tcenter">Tolerance Limits <span class="red">*</span></th>          
            <th rowspan="2" class="icon">&nbsp;</th>
        </tr>
        <tr>
            <th width="20" class="tcenter">T_2-1</th>
            <th width="20" class="tcenter">T_1-0</th>
            <th width="20" class="tcenter">m_base</th>
            <th width="20" class="tcenter">T_0-1</th>
            <th width="20" class="tcenter">T_1-2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="full">
               <td>
                <select name="steep_m_sub_keydriver[]" class="steep_m_sub_keydriver req" id="keyout0" />
            </td>
            <td>
                <input type="text" name="steep_m_sub_driver[]" class="steep_m_sub_driver req" id="subin0" />
            </td>
            <td>
                <input type="number" name="steep_m_sub_roi[]" class="steep_m_sub_roi req tcenter" min="1" max="10" />
            </td>
            <td>
                <input type="number" name="steep_m_sub_tl21[]" class="steep_m_sub_tl21 req tcenter" />
            </td>
            <td>
                <input type="number" name="steep_m_sub_tl10[]" class="steep_m_sub_tl10 req tcenter" />
            </td>
            <td>
                <input type="number" name="steep_m_sub_mbase[]" class="steep_m_sub_mbase req tcenter" />
            </td>
            <td>
                <input type="number" name="steep_m_sub_tl01[]" class="steep_m_sub_tl01 req tcenter" />
            </td>
            <td>
                <input type="number" name="steep_m_sub_tl12[]" class="steep_m_sub_tl12 req tcenter" />
            </td>
            <td class="icon">
                <a href="javascript:void(0);" class="addnewrow"><i class="fa fa-plus fa-lg"></i></a>
            </td>
        </tr>
    </tbody>
</table>

<div class="page-header"><a name="steep-operational"></a><h1>STEEP Analysis (Operational Level)</h1></div>

<div class="row clearfix" id="steepblock_sub">
    <div class="col-sm-12">
        <p><a class="btn btn-primary refresh" href="javascript:void(0);" onclick="refresh_subdriver();">Refresh Sub Drivers</a></p>
    </div>
</div>

<table name="steep_o_sub_drivers" class="steep_o_sub_drivers table table-bordered table-striped">
    <thead>
        <tr>
            <th rowspan="2">Key Drivers</th>
            <th rowspan="2">Sub Drivers</th>        
            <th rowspan="2">Measurement Value <span class="red">*</span></th>  
        </tr>
    </thead>
    <tbody>
        <tr class="full">
            <td>
                <input type="text" name="steep_o_key_driver[]" class="steep_o_key_driver req" id="keysubout0" readonly />
            </td>
            <td>
                <input type="text" name="steep_o_sub_driver[]" class="steep_o_sub_driver req" id="subout0" readonly />
            </td>
            <td>
                <input type="number" name="steep_o_sub_value[]" class="steep_o_sub_value req tcenter" id="measure0" min="0" max="200" />
            </td>
        </tr>
    </tbody>
</table>