Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi gente! Tudo bem?
É o seguinte, eu tenho uma estrutura mais ou menos assim:
<form action="" method="">
<input type="radio" name="item" id="item_1" />
<div id="publicacoes_item_1">
<input type="checkbox" name="item_1" id="pub_1" />
<input type="checkbox" name="item_1" id="pub_2" />
<input type="checkbox" name="item_1" id="pub_3" />
<input type="checkbox" name="item_1" id="pub_4" />
</div>
<input type="radio" name="item" id="item_2" />
<div id="publicacoes_item_2">
<input type="checkbox" name="item_1" id="pub_1" />
<input type="checkbox" name="item_1" id="pub_2" />
<input type="checkbox" name="item_1" id="pub_3" />
<input type="checkbox" name="item_1" id="pub_4" />
</div>
</form>Eu gostaria de dar um display: block na div correspondente ao radio button selecionado, entendem?
A princípio as divs estarão escondidas. Ao clicar no radio 1, por exemplo, as checkbox correspondentes a ele apareceriam.
Como faço esse javascript?
Acabei de fazer em javascript uma função que dá o display: block.
<script type="" language="javascript">
function verificaCheckButton(id) {
if(document.getElementById(id).checked) {
document.getElementById('publicacoes_' + id).style.display = 'block';
}
</script>Resta agora fazer a função pra esconder de novo se trocar de radio button. Como devo proceder?
Você não deve repetir IDs:
<input type="checkbox" name="item_1" id="pub_1" />
[...]
<input type="checkbox" name="item_1" id="pub_1" />
>
crie um else para o caso dele não estar marcado
if(document.getElementById(id).checked) {
document.getElementById('publicacoes_' + id).style.display = 'block';
}else{
document.getElementById('publicacoes_' + id).style.display = 'none';
}Já tentei, não funciona =/
>
Você não deve repetir IDs:
<input type="checkbox" name="item_1" id="pub_1" />
[...]
<input type="checkbox" name="item_1" id="pub_1" />
Onde você viu isso exatamente?
Onde você viu isso exatamente?
<form action="" method="">
<input type="radio" name="item" id="item_1" />
<div id="publicacoes_item_1">
** ****<input type="checkbox" name="item_1" id="pub_1" />**
<input type="checkbox" name="item_1" id="pub_2" />
<input type="checkbox" name="item_1" id="pub_3" />
<input type="checkbox" name="item_1" id="pub_4" />
</div>
<input type="radio" name="item" id="item_2" />
<div id="publicacoes_item_2">
** ****<input type="checkbox" name="item_1" id="pub_1" />**
<input type="checkbox" name="item_1" id="pub_2" />
<input type="checkbox" name="item_1" id="pub_3" />
<input type="checkbox" name="item_1" id="pub_4" />
</div>
</form>Exemplo:
<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );//apenas apelido para simplificar as chamadas
}
window.onload = function() id('item_1').onclick = function(){
show_f( this );
}
id('item_2').onclick = function(){
show_f( this );
}
}
function show_f( el ) id( 'f_'+el.id ).style.display = 'block';
}
</script>
</head>
<body>
<form action="" method="">
Item 1: <input type="radio" name="item" id="item_1" />
<fieldset id="f_item_1">
<input type="checkbox" name="item_1" />
<input type="checkbox" name="item_1" />
<input type="checkbox" name="item_1" />
<input type="checkbox" name="item_1" />
</fieldset>
<br />
Item 2: <input type="radio" name="item" id="item_2" />
<fieldset id="f_item_2">
<input type="checkbox" name="item_1" />
<input type="checkbox" name="item_1" />
<input type="checkbox" name="item_1" />
<input type="checkbox" name="item_1" />
</fieldset>
</form>
</body>
</html>Alteração para esconder os outros fieldsets:
function show_f( el )
{
hide();
id( 'f_'+el.id ).style.display = 'block';
}
function hide() var fields = document.getElementsByTagName('fieldset');
for( var i=0; i<fields.length; i++ )
{
fields[i].style.display = 'none';
}William, obrigado por enviar um código. Eu já consegui uma solução, lá no serviço mesmo.
Mas vou ver como está o seu pra pegar algumas ideias.
Abraços, dúvida resolvida.
Poste como você resolveu, pois pode ajudar outro usuário.
>
Poste como você resolveu, pois pode ajudar outro usuário.
Infelizmente não tenho como fazer isso no momento, pois o resultado ficou na empresa.
Segunda-feira à tarde eu postarei aqui mesmo.
function verifyCheckButton(id) {
for(var i = 1; i <= document.formCadExportacao.item.length; i++) {
if(document.formCadExportacao.item[i - 1].checked && document.formCadExportacao.item[i - 1].value == 'item_' + id) {
document.getElementById('publicacoes_item_' + i).style.display = 'block';
} else {
document.getElementById('publicacoes_item_' + i).style.display = 'none';
for(var x = 0; x < document.getElementsByName('item_' + i).length; x++) {
document.getElementsByName('item_' + i)[x].checked = false;
}
}
}
}Resolvido.
crie um else para o caso dele não estar marcado
if(document.getElementById(id).checked) {
document.getElementById('publicacoes_' + id).style.display = 'block';
}else{