javascript - 显示多个区 block ，单选被选中

Question

我需要一些帮助来编辑当前的脚本。

我使用 1 个单选按钮，当选择其中 1 个单选按钮时，应该隐藏/显示多个 div。

它仅适用于 1 个 div，但我无法使其适用于多个 div。

我当前的 HTML:

            <div class="col-md-12">
              <div class="form-group form-group-xl">
                <label for="Particulier"><input type="radio" id="Particulier"checked="checked" name="checkzakelijk" onclick="ShowHideDiv()" />Particulier</label>
                <label for="Zakelijk"><input type="radio" id="Zakelijk" name="checkzakelijk" onclick="ShowHideDiv()" />Bedrijf</label>
              </div>
            </div>

    <div class="col-sm-6" id="checkzakelijk1" style="display:none;">
            <div class="form-group">
                <label class="control-label" for="customfield{$customfield.id}">{$customfield.name}</label>
                    <div class="control">
                        {$customfield.input} {$customfield.description}
                    </div>
            </div>
    </div>
    <div class="col-sm-6" id="checkzakelijk2" style="display:none;">
            <div class="form-group">
                <label class="control-label" for="customfield{$customfield.id}">{$customfield.name}</label>
                    <div class="control">
                        {$customfield.input} {$customfield.description}
                    </div>
            </div>
    </div>

当前脚本:

    <script type="text/javascript">
        function ShowHideDiv() {
            var chkYes = document.getElementById("Zakelijk");
            var dvPassport = document.getElementById("checkzakelijk");
            var dvPassport = document.getElementById("checkzakelijk1");
            var dvPassport = document.getElementById("checkzakelijk2");
            dvPassport.style.display = chkYes.checked ? "block" : "none";
            }
    </script> 

Answer 1

您正在覆盖 dvPassport 变量，因此只有最后一个元素才会生效。

将其更改为

function ShowHideDiv() {
    var chkYes = document.getElementById("Zakelijk");

    var dvPassport1 = document.getElementById("checkzakelijk");
    var dvPassport2 = document.getElementById("checkzakelijk1");
    var dvPassport3 = document.getElementById("checkzakelijk2");

    var display = chkYes.checked ? "block" : "none";

    dvPassport1.style.display = display;
    dvPassport2.style.display = display;
    dvPassport3.style.display = display;
}