Javascript onchange function doesn't change div

Question

So I don't know how to to go about having my onchange function to populate the div the radio button its connected too since I'm not to familiar with how JavaScript works as i tried pasting the HTML in the JavaScript....The tables radio button is supposed to populate its connected div with check boxes while the view radio button is supposed to have its div be empty. Codepen http://codepen.io/MarkBond/pen/JdOZaw?editors=101 BTW this is done in bootstrap

JAVASCRIPT:

function changeSelection() {

    if (document.getElementById("selectionTables").checked) {
        document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
        document.getElementById("populateCheckBoxes").innerHTML = "";
    } else {
        document.getElementById("dropdownMenuSelect").innerHTML = "Views";
        document.getElementById("unpopulateCheckBoxes").innerHTML = "";
    }
}

HTML:

this isn't anywhere in the codepen because I have no idea where to put it :/

<div class="checkbox">
    <label>
        <input type="checkbox" id="selectionCondition" />Condition
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" id="selectionDistribution" />Distribution
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" id="selectionProgram" />Program
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" id="selectionTreatment" />Treatment
    </label>
</div>

HERES THE RADIO BUTTON AND DROPDOWN:

                    <form role="form">
                        <div class="row">
                            <div class="radio col-xs-2" id="populateSelection"  onchange="changeSelection()">
                                <label>
                                    <input type="radio" name="optradio" id="selectionTables" />Use Tables
                                </label>&nbsp;&nbsp;
                                <label>
                                    <input type="radio" name="optradio" id="selectionViews" />Use Views
                                </label>
                            </div>
                            <div class="dropdown col-xs-10">
                                <!--DROPDOWN BUTTON-->
                                <button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
                                    Tables
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
                                    <!--DROPDOWN MENU-->
                                    <li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row" id="populateCheckBoxes"></div>
                        <div class="row" id="unpopulateCheckBoxes"></div>
                    </form>

Answer 1

The div doesn't change, so onchange is not going to work. Try this:

<label>
  <input type="radio" name="optradio" id="selectionTables"  onchange="changeSelection()" />Use Tables
</label>&nbsp;&nbsp;
<label>
  <input type="radio" name="optradio" id="selectionViews"  onchange="changeSelection()"/>Use Views
</label>