Henk Z Henk Z - 3 months ago 11
HTML Question

Display multiple blocks, radio is checked

I need some help in editing my current script.

I use 1 radio button, that should hide/display multiple divs when 1 of the radio buttons is selected.

It works fine for just 1 div, but I can not make it work with multiple divs.

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


Current script:

<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

You are overwriting dvPassport variable, so only the last element will be have its effect.

Change it to

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