Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jessi_1412

Adaptar script que usa checkbox para radio

Recommended Posts

Bom dia, Tenho o seguinte codigo.

<td>
  <input type="checkbox" value="true" name="teste" id="teste" <#if (folhaTDMecanicoForm.lub_forcada)>checkbox</#if>onclick="javascript: exibe();">
</td>
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';
    }
  }
}

Que faz o seguinte. quando o usuario clica no checkbok, abre uma div com uma serie de campos. Até ai tudo certo e funcionando, Porém preciso que ou invez de (type="checkbox")tenha (tye="radio").Vejam o html abaixo.

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

Como posso adaptar o script acima para funcionar com o type="radio"?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não muda nada, é igualzinho.

 

Apenas não duplique IDs. ID é um identificador único.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia Bruno

 

 

ficaria algo assim? Certo.

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

Porém ja tentei isso e não funcionou.

Compartilhar este post


Link para o post
Compartilhar em outros sites

E o que aparece no console de erros ?

 

Ctrl + Shift + J no Firefox ou Chrome ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui.

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.