Javascript 显示多个块，收音机处于选中状态

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

我使用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>

微粒子
贝德里杰夫
{$customfield.name}
{$customfield.input}{$customfield.description}
{$customfield.name}
{$customfield.input}{$customfield.description}

当前脚本：

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

函数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？“块”：“无”；
}

您正在覆盖

dvPassport

变量，因此只有最后一个元素才有效

换成

---

您正在覆盖

dvPassport

变量，因此只有最后一个元素才会生效

换成

---

仔细看看这一点：

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

这里要做的是多次使用相同的名称声明一个新变量，这没有多大意义

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

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

---

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

仔细看一下这一点：

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

这里要做的是多次使用相同的名称声明一个新变量，这没有多大意义

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

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

---

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

每次声明

var-dvPassport

，它都会收到一个新值（本例中为一个元素），因此只有最后一行生效。每次声明

var-dvPassport

，它都会收到一个新值（本例中为一个元素），因此只有最后一行生效。