Javascript onchange函数不会改变div [重复]

Question

所以我不知道如何让我的 onchange 函数填充 div 和它连接的单选按钮，因为我不熟悉 JavaScript 的工作原理，因为我尝试将 HTML 粘贴到 JavaScript 中。 ..表格单选按钮应该使用复选框填充其连接的 div，而视图单选按钮应该使其 div 为空。 Codepen http://codepen.io/MarkBond/pen/JdOZaw?editors=101 BTW 这是在引导程序中完成的

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：

这不在代码笔中的任何地方，因为我不知道把它放在哪里：/

<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>

这里是单选按钮和下拉菜单：

                    <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

div 没有改变，所以onchange 不起作用。试试这个：

<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>