jQuery Botão de Radio de acordo com a escolha apresentar DIV ou sumir.
17/03/2017
0
Gostaria que me auxiliassem em um código que estou desenvolvendo em Jquery. Preciso que o mesmo ao clicar no botão de Rádio "SIM" apresente uma determinada DIV e ao clicar em "NÃO" ele recolha essa DIV dinamicamente.
Segue código para análise:
FUNÇÃO JQuery:
<script type="text/javascript">
//FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
$(document).ready(function(){
$("input[name$='checkBoxSubordinado']").click(function(){
var test = $(this).val();
$("div.desc").hide();
if (test == 'possui') {
$("#divHide").show();
}else{
$("divHide").hide();
}
});
});
</script>
HTML:
<tr>
<td colspan="2">
<label for="subordinado" class="control-label labelTab2">Possui subordinados?</label>
<label class="radio-inline col-md-offset-4">
<input type="radio" name="checkBoxSubordinado" id="possui" value="sim">SIM
</label>
<label class="radio-inline">
<input type="radio" name="checkBoxSubordinado" id="naoPossui" value="nao" checked>NÃO
</label>
</td>
</tr>
Salute Especializadas
Post mais votado
17/03/2017
Analisando o código JQuery, verifiquei que isto:
$("divHide").hide();deveria esta assim:
$("#divHide").hide();No código HTML que você postou não identifiquei a tag DIV com o id divHide. Quem seria "div.desc" no seu código HTML?
Angelo Santos
Mais Posts
17/03/2017
Angelo Santos
Esta é a correção para o seu código JQuery:
<script type="text/javascript">
//FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
$(document).ready(function(){
$("#divHide").hide();
$("input[name$='checkBoxSubordinado']").click(function(){
var test = $(this).val();
if (test == 'sim') {
$("#divHide").show();
}else{
$("#divHide").hide();
}
});
});
</script>No seu código HTML deve existir:
<div id="divHide"></div>
Espero ter ter ajudado. Bons estudos !
17/03/2017
Salute Especializadas
Esta é a correção para o seu código JQuery:
<script type="text/javascript">
//FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
$(document).ready(function(){
$("#divHide").hide();
$("input[name$='checkBoxSubordinado']").click(function(){
var test = $(this).val();
if (test == 'sim') {
$("#divHide").show();
}else{
$("#divHide").hide();
}
});
});
</script>No seu código HTML deve existir:
<div id="divHide"></div>
Espero ter ter ajudado. Bons estudos !
Olá Angelo,
Obrigado pela resposta.
Efetuei as alterações sugeridas porém ainda sem sucesso. Seria algum problema na importação do jQuery? Segue as importações das TAGs "<script>"
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SGA_RH</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css-lvto-func/bootstrap.min.css" rel="stylesheet">
<link href="css-lvto-func/sgafolhaestilo.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">Obrigado.
17/03/2017
Angelo Santos
<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
19/03/2017
Salute Especializadas
Efetuei a importação da maneira que me sugeriu, porém, sem resultado.
20/03/2017
Angelo Santos
Copia o seguinte código e salva como um arquivo HTML e testa abrindo em um browser ou testa ele aqui link. Esta funcional. Aproveita e verifica se a estrutura no seu código esta igual. Perceba que a chamada da função javascript esta depois da tag body.
<htm>
<head>
<script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr>
<td colspan="2">
<label for="subordinado" class="control-label labelTab2">Possui subordinados?</label>
<label class="radio-inline col-md-offset-4">
<input type="radio" name="checkBoxSubordinado" id="possui" value="sim">SIM
</label>
<label class="radio-inline">
<input type="radio" name="checkBoxSubordinado" id="naoPossui" value="nao" checked>NÃO
</label>
</td>
</tr>
</table>
<br />
<div id= "divHide">
TESTE DIV
</div>
</body>
<script type="text/javascript">
//FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
$(document).ready(function(){
$("#divHide").hide();
$("input[name$='checkBoxSubordinado']").click(function(){
var test = $(this).val();
if (test == 'sim') {
$("#divHide").show();
}else{
$("#divHide").hide();
}
});
});
</script>
</htm>20/03/2017
Salute Especializadas
Problema resolvido com seu código, apenas ajustei para atender minhas necessidades funcionou perfeitamente. O que poderia ser? Gostaria muito de saber para que pudesse resolver problemas desse tipo futuramente rs.
Muito obrigado amigo, um grande abraço.
20/03/2017
Angelo Santos
Fico feliz em saber que ajudei a resolver o seu problema.
Com relação ao que estava ocorrendo para seu código não está funcionando, eu citei alguns erros no desenvolvimento da função javascript (JQuery) na interação que fizemos.
Um outro problema na função foi que o atributo "test" guarda o valor atribuído no atributo 'value' da tag 'input' do seu html. Se verificar o value atribuido é "sim". Você estava realizando o teste com o valor do id do atributo que é 'possui' conforme abaixo.
var test = $(this).val();
if (test == 'possui') {
...
}O atributo do id da div deve ser igual ao que você esta utilizando para realizar o hide() ou o show():
HTML: <div id= "divHide"></div>
JQuery: $("#divHide").show();
Aconselho realizar o curso JavaScript Completo para aprimoramento dos seus conhecimentos.
Nada mais justo que um like nas respostas. Forte abraço e bons estudos !
Clique aqui para fazer login e interagir na Comunidade :)