Znikające linijki tekstu

pytanie zadane 16 lipca 2019 w JavaScript przez niezalogowany

Cześć, po wybraniu OPCJI 1 LUB OPCJI 2, a następnie zaznaczeniu checkbox'a, znika on. Która linijka kodu jest błędna?

Mam jeszcze drugie pytanie dotyczące przycisku typu radio, czy jest możliwe, żeby po wybraniu OPCJI 1, checkbox'y zaznaczone w OPCJI 2 się resetowały?

<HTML>

<head>
    <meta charset="utf-8">
    <style type="text/css" media="screen">
        .hide {
            display: none;
        }

    </style>
</head>

<body>

    <div id="tabs">
        <div id="nav">
            <p>OPCJA 1:<input type="radio" name="tab" value="pkfrom" class="div1"/></p>
            <p>OPCJA 2:<input type="radio" name="tab" value="pkfrom" class="div2"/></p>
        </div>

        <div id="div1" class="tab">
            <form>
                <p>A1<input type="checkbox"></p>
                <p>A2<input type="checkbox"></p>
            </form>
        </div>

        <div id="div2" class="tab">
            <form>
                <p>B1<input type="checkbox"></p>
                <p>B2<input type="checkbox"></p>
            </form>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        (function() {
            var tabs = document.getElementById('tabs');
            var nav = tabs.getElementsByTagName('input');

            /*
             * Hide all tabs
             */
            function hideTabs() {
                var tab = tabs.getElementsByTagName('div');
                for (i in tab) {
                    if (tab[i].className == 'tab') {
                        tab[i].className = tab[i].className + ' hide';
                    }
                }
            }

            /*
             * Show the clicked tab
             */
            function showTab(tab) {
                document.getElementById(tab).className = 'tab'
            }
            hideTabs(); /* hide tabs on load */

            /*
             * Add click events
             */
            for (var i = 0; i < nav.length; i++) {
                nav[i].onclick = function() {
                    hideTabs();
                    showTab(this.className);
                }
            }
        })();

    </script>
</body>

</HTML>