Adapt script that uses checkbox for radio

Question

Adapt script that uses checkbox for radio

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

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 checkbok, opens a div with a series of fields. So far so good and working. However, I need to instead of type="checkbox" have 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 script above to work with type="radio" ?

javascript html input

asked by anonymous 25.02.2015 / 14:26

2 answers

Dependency Error Make a negation filter in ng-repeat

score 3 · Answer 1

___ erkimt ___ Adapt script that uses checkbox for radio ______ qstntxt ___

Good morning, I have the following code:

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>

Which does the following: When the user clicks checkbok, opens a div with a series of fields. So far so good and working. However, I need to instead of %code% have %code% . See the HTML below.

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

How can I adapt the script above to work with %code% ?

______ ___ azszpr52023

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

As I do not know what values you're assigning the type and man_tipo, I put fixed values.

Then? is this the expected behavior?

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

%pre%

______ azszpr52068 ___

I built it using the same script, with some changes.

%pre%

___

score 0 · Answer 2

I built it 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';		
		}		
	}
}