Показать несколько блоков, радио проверено

Question

Мне нужна помощь в редактировании текущего скрипта.

Я использую 1 радиокнопку, которая должна скрывать/отображать несколько разделов, когда выбрано 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(); 

Кроме того, в тех случаях, когда вы хотите применить что-то на несколько элементов, то стоит дать им один и тот же класс, а не список идентификаторов. Это проще и делает код более читаемым.