Ir para conteúdo

Arquivado

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

xabud

Alterar fundo do radio button selecionado

Por , em Javascript

Recommended Posts

xabud    0

xabud
Postado

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){ 
document.forms["form_perguntas"]["respostas"][n].checked=true 
} 
</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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Use tag de código para postar código.

 

Sobre seu problema, recomendo refazer, está muito confuso seu código, por isso a dificuldade.

 

Para uma resolução rápida, tente trocar:

$(window).load(function(){

Por:

jQuery(function($){

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, esqueça a função selectRadio e use a tag label de forma correta.

 

    <label for="r1" class="q" style="cursor:pointer">
        <input type="radio" id="r1" name="respostas" />
        <span style="cursor: pointer; cursor: hand;">A.) Exemplo 2</span>
    </label >
    <label for="r2" class="q" style="cursor:pointer">
        <input type="radio" id="r2" name="respostas" />
        <span style="cursor: pointer; cursor: hand;">B.) Exemplo 2</span>
    </label >
note que troque o id="1" por id="r1", pois IDs não devem começar com números.

 

Apenas utilizando a tag correta, vc não precisa do js selectRadio.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xabud    0

xabud
Postado

Primeiramente obrigado pela atencao de voces!!

 

Entao Lucas, se eu ocultar o radio (style="visibility:hidden;") e clicar la no meio da div nao esta funcionando nao. A ideia eh nem aparecer esse radio, se a pessoa clicar em qualquer lugar da div (100%) teria que selecionar o radio e o fundo ficar verde mostrando ao usuario final que ele selecionou a opcao. Pelo que eu testei nao funcionou, clicando la no meio ou no canto direito da div..

 

Imagine que o usuario utilize um monitor touch screen e quer selecionar a opcao clicando no centro ou ate mesmo no canto direito da div 100%)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Lembrando q para fazer o label ficar 100%, igual a uma div, basta dar um

display: block;
para ele.

E ai vc tem o efeito q vc quer, apenas com html puro, sem js.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xabud    0

xabud
Postado

Ola Wiliam! Voce tem razao! Deixei limpo o codigo conforme comentou acima, so ainda nao consegui alterar o fundo com a selecao (Exemplo 4), segue o teste atualizado abaixo:

 

LINK

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Adicione esse js:

 

$(document).ready(function(){
    $('input:radio').on("click", function(){
        $('label.highlight').removeClass('highlight');
        $(this).parents('label').addClass('highlight');
    });
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito