Check List on Selection Change

Check List on Selection Change

by Ken Z

HTML

<form id="survey" action="#" method="post">
    <div id="section1">
        <label for="Gender">Select employee gender.</label>
        <select id="Gender" onchange="selection(this);">
            <option value="Gender">---Select---</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
    <div id="section2" style="display:none;">Please select employee gender from above.</div>
    <div id="section3" style="display:none;">Male Employees
        <br />
        <label for="Jim">Jim</label>
        <input type="checkbox" id="Jim" />
        <label for="Tom">Tom</label>
        <input type="checkbox" id="Tom" />
        <label for="Sam">Sam</label>
        <input type="checkbox" id="Sam" />
    </div>
    <div id="section4" style="display:none;">Female Employees<br />
        <label for="Kate">Kate</label>
        <input type="checkbox" id="Kate" />
        <label for="Claire">Claire</label>
        <input type="checkbox" id="Claire" />
        <label for="Sue">Sue</label>
        <input type="checkbox" id="Sue" />
    </div>
</form>

JavaScript

var sections = {
     'Gender': 'section2',
         'Male': 'section3',
         'Female': 'section4'
 };

 var selection = function (select) {

     for (var i in sections)
     document.getElementById(sections[i]).style.display = "none";

     document.getElementById(sections[select.value]).style.display = "block";

 };