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

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

Uncaught TypeError:　document.getElementsById is not a function

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

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