Adapt script that uses checkbox for radio

Question

Good morning, I have the following code:

function exibe() {
  var tipo = "${mainForm.tipo}";
  var man_tipo = "${mainForm.man_tipo}";


  if ((man_tipo == 'B' && tipo.search('V').toFixed(0) < 0)) {

    if (document.form_folhatd_teste.teste.checked) {

      document.getElementById('pressao_min').style.display = '';
      document.getElementById('pressao_max').style.display = '';
      document.getElementById('vazao_min').style.display = '';
      document.getElementById('vazao_max').style.display = '';
    } else {
      document.getElementById('pressao_min').style.display = 'none';
      document.getElementById('pressao_max').style.display = 'none';
      document.getElementById('vazao_min').style.display = 'none';
      document.getElementById('vazao_max').style.display = 'none';
    }
  }
}

<td>
  <input type="checkbox" value="true" name="teste" id="teste" <#if (folhaTDMecanicoForm.lub_forcada)>checkbox</#if>onclick="javascript: exibe();">
</td>

Which does the following: When the user clicks on the checkbok, it opens a div with a series of fields. So far so good and working. However, I need that instead of type="checkbox" has been type="radio" .See the HTML below.

<td>
  Quando selecionado não abre nada
  <input type="radio" value="nao_abri" name="teste" id="teste">
</td>
<td>
  Quando selecionada abre a div 1
  <input type="radio" value="abri1" name="teste" id="teste" <#if (folhaTDTesteForm.teste)>checked</#if>onclick="javascript: exibe();">
</td>
<td>
  Quando selecionada abre a div 2
  <input type="radio" value="abri2" name="teste" id="teste" <#if (folhaTDTesteForm.teste)>checked</#if>onclick="javascript: exibe();">
</td>

How can I adapt the above script to work with type="radio"?

Answer 1

@Jessi, I ran some tests here, it seemed to be working normal:

As I don’t know what values you are assigning type and type, I put fixed values.

So? This is the expected behavior?

var checkbox = document.querySelectorAll("[name='teste']");
var pressao_min = document.getElementById('pressao_min')
var pressao_max = document.getElementById('pressao_max')
var vazao_min = document.getElementById('vazao_min')
var vazao_max = document.getElementById('vazao_max')

var tipo = "Bola";
var man_tipo = "B";

for (var indice in checkbox) {
    checkbox[indice].onclick = function () {   
        if ((man_tipo == 'B' && tipo.search('V').toFixed(0) < 0)) {            
            var display = this.dataset.abrir == "true" ? "" : "none";
            console.log(display);
            pressao_min.style.display = display;
            pressao_max.style.display = display;
            vazao_min.style.display = display;
            vazao_max.style.display = display;
        }
    }
}

<input type="radio" data-abrir="false" name="teste" id="teste1"  />
<label for="teste1" >Não Exibir</label>
<input type="radio" data-abrir="true" name="teste" id="teste2" checked />
<label for="teste2" >Exibir</label>
<input type="radio" data-abrir="true" name="teste" id="teste3" />
<label for="teste3" >Exibir</label>

<div>
    <span id="pressao_min" >pressao_min</span>
</div>
<div>
    <span id="pressao_max" >pressao_max</span>
</div>
<div>
    <span id="vazao_min" >vazao_min</span>
</div>
<div>
    <span id="vazao_max" >vazao_min</span>
</div>

Answer 2

I tidied up using the same script, with some changes.

function exibe(){
	var tipo="${mainForm.tipo}";
	var man_tipo="${mainForm.man_tipo}";
	
	if ((man_tipo=='B' && tipo.search('V').toFixed(0)<0)){	
		
		if ( document.getElementById("teste1").checked ||  document.getElementById("teste2").checked){
			document.getElementById('pressao_min').style.display='';
			document.getElementById('pressao_max').style.display='';
			document.getElementById('vazao_min').style.display='';
			document.getElementById('vazao_max').style.display='';	
			
		}else {
			document.getElementById('pressao_min').style.display='none';
			document.getElementById('pressao_max').style.display='none';
			document.getElementById('vazao_min').style.display='none';
			document.getElementById('vazao_max').style.display='none';		
		}		
	}
}