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

Answer 2

仔细看看这一点：

var dvPassport = document.getElementById("checkzakelijk");
var dvPassport = document.getElementById("checkzakelijk1");
var dvPassport = document.getElementById("checkzakelijk2");

你在这里做的是多次声明一个具有相同名称的新变量，这没有多大意义。

我建议使用jQuery类选择器，即

$(".col-sm-6").hide();

此外，如果您想将某些内容应用于多个元素，则值得为它们提供相同的类，而不是列出ID。它更简单，使代码更具可读性。

显示多个块，检查无线电

2 个答案: