$('#chkVitalSigns').click(function() { $('#spanVitalSignsPrompts').toggle($(this).attr('checked') !== undefined); }); $('#chkMainOrder').click(function() { $('#rowSubOrders').toggle($(this).attr('checked') !== undefined); });
<h1>Example 1 - Prompts</h1> <input type="checkbox" name="chkVitalSigns" id="chkVitalSigns" /> Vital Signs <span id="spanVitalSignsPrompts" style="display:none"> Frequency: <select name="cboVitalSignsFreq" id="cboVitalSignsFreq"> <option>Q15 MIN</option> <option>Q30 MIN</option> <option>Q1 HR</option> <option>Q4 HR</option> </select> </span> <hr /> <h1>Example 2 - Sub orders</h1> <table> <tr><td> <input type="checkbox" name="chkMainOrder" id="chkMainOrder" /> Main Order </td></tr> <tr id="rowSubOrders" style="display:none"><td><table> <tr><td> <input type="checkbox" name="chkSubOrder1" id="chkSubOrder1" /> Sub Order 1 </td></tr> <tr><td> <input type="checkbox" name="chkSubOrder2" id="chkSubOrder2" /> Sub Order 2 </td></tr> </table></td></tr> </table>
h1 { font-size: 14pt; font-family: verdana,tahoma } table table { padding-left: 25px; }