

ラジオボックスを選択したときに、選択した以外のセレクトボックスを非表示にしたいのですが、選択する前から表示されたままで、選択しても非表示にすることができません。どのようにすると非表示にできますか？

Chrome の JavaScript コンソールで確認すると、
`document.getElementsById('firstBox').style.display = "none";` のところに

> Uncaught TypeError: document.getElementsById is not a function

のエラーが表示されますが、どのように間違っているのかがわかりません。  
ご教示いただけると幸いです。

[code]

        <head>
        <script language="javascript">
        <!--
    
        function entryChange1() {
            radio = document.getElementsByName('entryPlan')
            if(radio[0].checked) {
                // フォーム
                document.getElementsById('firstBox').style.display = "";
                document.getElementsById('secondBox').style.display = "none";
                document.getElementsById('thirdBox').style.display = "none";
                document.getElementsById('fourthBox').style.display = "none";
                document.getElementsById('fifthBox').style.display = "none";
                document.getElementsById('sixthBox').style.display = "none";
            }else if(radio[1].checked) {
                // フォーム
                document.getElementsById('firstBox').style.display = "none";
                document.getElementsById('secondBox').style.display = "";
                document.getElementsById('thirdBox').style.display = "none";
                document.getElementsById('fourthBox').style.display = "none";
                document.getElementsById('fifthBox').style.display = "none";
                document.getElementsById('sixthBox').style.display = "none";
            }else if(radio[2].checked) {
                // フォーム
                document.getElementsById('firstBox').style.display = "none";
                document.getElementsById('secondBox').style.display = "none";
                document.getElementsById('thirdBox').style.display = "";
                document.getElementsById('fourthBox').style.display = "none";
                document.getElementsById('fifthBox').style.display = "none";
                document.getElementsById('sixthBox').style.display = "none";
            }else if(radio[3].checked) {
                // フォーム
                document.getElementsById('firstBox').style.display = "none";
                document.getElementsById('secondBox').style.display = "none";
                document.getElementsById('thirdBox').style.display = "none";
                document.getElementsById('fourthBox').style.display = "";
                document.getElementsById('fifthBox').style.display = "none";
                document.getElementsById('sixthBox').style.display = "none";
            }else if(radio[4].checked) {
                // フォーム
                document.getElementsById('firstBox').style.display = "none";
                document.getElementsById('secondBox').style.display = "none";
                document.getElementsById('thirdBox').style.display = "none";
                document.getElementsById('fourthBox').style.display = "none";
                document.getElementsById('fifthBox').style.display = "";
                document.getElementsById('sixthBox').style.display = "none";
            }else if(radio[5].checked) {
                // フォーム
                document.getElementsById('firstBox').style.display = "none";
                document.getElementsById('secondBox').style.display = "none";
                document.getElementsById('thirdBox').style.display = "none";
                document.getElementsById('fourthBox').style.display = "none";
                document.getElementsById('fifthBox').style.display = "none";
                document.getElementsById('sixthBox').style.display = "";
            }
        }
        window.onload = entryChange1;
        // -->
        </script>
        </head>
    
        <body>
        <form>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>        
                        <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" />foo1</label>
                        <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />foo2</label>
                        <label><input type="radio" name="entryPlan" value="hoge3" onclick="entryChange1();" />foo3</label>
                        <label><input type="radio" name="entryPlan" value="hoge4" onclick="entryChange1();" />foo4</label>
                        <label><input type="radio" name="entryPlan" value="hoge5" onclick="entryChange1();" />foo5</label>
                        <label><input type="radio" name="entryPlan" value="hoge6" onclick="entryChange1();" />foo6</label>
                    </td>
                </tr>
    
                <!-- 表示非表示切り替え -->
                <tr id="firstBox">
                    <td>
                        <select name="foo1" size="1">
                        <option value="サンプル1">サンプル１</option>
                        </select>
                    </td>
                </tr>
    
                <!-- 表示非表示切り替え -->
                <tr id="secondBox">
                    <td>
                        <select name="foo2" size="1">
                        <option value="サンプル2">サンプル2</option>
                        </select>
                    </td>
                </tr>
    
                <!-- 表示非表示切り替え -->
                <tr id="thirdBox">
                    <td>
                        <select name="foo3" size="1">
                        <option value="サンプル3">サンプル3</option>
                        </select>
                    </td>
                </tr>
    
                <!-- 表示非表示切り替え -->
                <tr id="fourthBox">
                    <td>
                        <select name="foo4" size="1">
                        <option value="サンプル4">サンプル4</option>
                        </select>
                    </td>
                </tr>
    
                <!-- 表示非表示切り替え -->
                <tr id="fifthBox">
                    <td>
                        <select name="foo5" size="1">
                        <option value="サンプル5">サンプル5</option>
                        </select>
                    </td>
                </tr>
    
                <!-- 表示非表示切り替え -->
                <tr id="sixthBox">
                    <td>
                        <select name="foo6" size="1">
                        <option value="サンプル6">サンプル6</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2016-03-10T19:47:03.333
23001
2019-06-10T06:21:20.467
2019-06-10T06:21:20.467
2238
8464
question
javascript
選択した以外のselectboxを非表示にしたい