Doubt to automate javascript function

Question

I’m using a Javascript function to show/hide a div according to the choice of a radio, but now they’ve become many, so I’m trying to automate it the way I’m learning in codeacademy.

From the code I already used, I created a variable as a function, and assigned two parameters, one for each id (of radio, which must be checked, and div, which should appear). Then I put it into HTML the same way I had been using (inside the onclick), but it’s not working.

That’s how I’m trying:

FIDDLE.

JS:

var esconderradio = function(var1, var2) {

    if (document.getElementById(var1).checked) {
        document.getElementById(var2).style.display = "";
    }
    else {
        document.getElementById(var2).style.display = "none";
    }
};

Then in HTML I put like this:

<label class="radio" for="Csaldsim">
    Sim
    <input type="radio" id="Csaldsim" onclick="esconderradio('Csaldim', 'salvenc')"></label>
<label class="radio" for="Csaldnao">
    Não
    <input type="radio" id="Csaldnao" onclick="onclick="esconderradio('Csaldim', 'salvenc')"></label>

And so is the code I’m using (I adapted 2 cases to show how I’m doing, but there are already 33):

FIDDLE.

    function HabCampos33() {
        if (document.getElementById('Csaldsim').checked) {
            document.getElementById('salvenc').style.display = "";
        }  else {
            document.getElementById('salvenc').style.display = "none";
        }
    }


    function HabCampos32() {
        if (document.getElementById('Csaldsim2').checked) {
            document.getElementById('salvenc2').style.display = "";
        }  else {
            document.getElementById('salvenc2').style.display = "none";
        }
    }

<label class="radio" for="Csaldsim">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim" onclick="HabCampos33()"></label>
<label class="radio" for="Csaldnao">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao" onclick="HabCampos33()"></label>

<br>
<label class="radio" for="Csaldsim2">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim2" onclick="HabCampos32()"></label>
<label class="radio" for="Csaldnao2">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao2" onclick="HabCampos32()"></label>

<br>

<div  class=" col-md-3 panel panel-default" id="salvenc" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc"></label>
</div>
<br>
<div  class=" col-md-3 panel panel-default" id="salvenc2" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc2"></label>
</div>

Answer 1

I changed its function, give a look:

function manipulaDiv(checked, idDiv) {
    if (checked) {
        document.getElementById(idDiv).style.display = "";
    }  else {
        document.getElementById(idDiv).style.display = "none";
    }
}

<label class="radio" for="Csaldsim">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim" onclick="manipulaDiv(true, 'salvenc')"></label>
<label class="radio" for="Csaldnao">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao" onclick="manipulaDiv(false, 'salvenc')"></label>

<br>
<label class="radio" for="Csaldsim2">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim2" onclick="manipulaDiv(true, 'salvenc2')"></label>
<label class="radio" for="Csaldnao2">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao2" onclick="manipulaDiv(false, 'salvenc2')"></label>

<br>
<br>

<div  class=" col-md-3 panel panel-default" id="salvenc" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc"></label>
</div>
<br>
<div  class=" col-md-3 panel panel-default" id="salvenc2" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc2"></label>
</div>
<br>