Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola! Estou precisando de uma ajuda basica js.
Tenho dois exemplos abaixo, no primeiro está ok! Quando o radio é selecionado a div altera o fundo.
No Exemplo 2, que é o que preciso implementar, quando seleciona o radio button o fundo da div se altera (ok!), mas quando clico na div (link) o fundo nao se altera. A principio existem dois codigos javascripts diferentes, precisaria unifica-los. A idéia final é no Exemplo 2 deixar funcionando as selecoes (radio) alterando o fundo quando clicar em qualquer lugar da div e tambem ocultar o botao radio button (style="visibility:hidden;").
Obs: Preciso deixar em forma de array para implementar dinamicamente.
Se puderem ajudar agradeco. Segue o codigo abaixo e o link:
Link provisorio: http://goo.gl/65dxrI
Codigo:
<html>
<head>
<script type='text/javascript' src='jquery-1.10.1.js'></script>
<script type='text/javascript'>
function selectRadio(n){</script>
<script type='text/javascript'>
$(window).load(function(){
$('input:radio').change(function(){
$('div.highlight').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});
});
</script>
<style type="text/css">
.q{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-image:url(images/bg_1.jpg);
height:53px;
line-height:50px;
}
.highlight {
background-image:url(images/bg_2.jpg);
height:53px;
}
</style>
</head>
<body>
<form action="" method="get" id="form_perguntas">
<div class="box" >
<div class="q">
<input type="radio" id="3" name="22" />
<label for="11">A.) Exemplo 1</label>
</div>
<div class="q">
<input type="radio" id="4" name="22" />
<label for="22">B.) Exemplo 1</label>
</div>
<br><hr><br>
<div class="q" onClick="selectRadio(0)" style="cursor:pointer">
<input type="radio" id="1" name="respostas" />
<label for="1" style="cursor: pointer; cursor: hand;">A.) Exemplo 2</label>
</div>
<div class="q" onClick="selectRadio(1)" style="cursor:pointer">
<input type="radio" id="2" name="respostas" />
<label for="2" style="cursor: pointer; cursor: hand;">B.) Exemplo 2</label>
</div>
</div>
</form>
</body>
</html>Carregando comentários...