0

Estou precisando fazer um questionário de perguntas simples e respostas de multipla escolha, neste caso escolhi o radio button...

No meu PHP estou recebendo os posts e já estou fazendo as verificação das respostas com if. O meu problema é, no layout não existe aquela bolinha do radio button... ele simplesmente pega através do for mas não sei o que esta acontecendo que não esta funcionando.

Até o momento ele está desta forma:

inserir a descrição da imagem aqui

E é para estar desta forma:

inserir a descrição da imagem aqui

E meu código é este:

-HTML

<div class="block_question1">
                        <ul>
                            <li id="pg1_q1">
                                <input name="acerto1" value="acerto1" type="radio" class="selecionar">
                                <label for="acerto1">Red</label>
                            </li>

                            <li id="pg1_q2">
                                <input name="acerto12" type="radio">
                                <label for="">yellow</label>
                            </li>
                        </ul>
                        <ul>
                            <li id="pg1_q3">
                                <input name="acerto1" type="radio">
                                <label for="">Blue</label>
                            </li>

                            <li id="pg1_q4">
                                <input name="acerto1" type="radio">
                                <label for="">Green</label>
                            </li>
                        </ul>
                    </div>

-JS

  $('#perguntas-1 #pg1_q1').click(function () {
        $('.block_question1 #pg1_q1').toggleClass('active_answers');
        $("#pg1_q1 .selecionar").css({"visibility":"hidden"});
});

Em resumo, quero que clique na div do buttao e o value seja inserido para que o php reconheça o post

obs: Seu eu clico no radio button ele funciona... se eu clico na div que forma o botao ele não aplica o value

3
  • Você que seja atribuído um valor ao input:radio ao clicar na div ou no elemento li? Por que você já não atribui o valor ao input? Commented 6/03/2018 às 4:24
  • Não deu para entender direito o que vc quer. É para clocar na li ou na div? E depois de clocar vc quer que o Radio fique como o atributo Checked é isso?
    – hugocsl
    Commented 6/03/2018 às 10:40
  • É que precisava esconder a bolinha do radio, e ao clicar na div ele insere o value.... quando eu escondo com visibility:hidden o value para de funcionar...
    – Nathan
    Commented 6/03/2018 às 13:08

1 Resposta 1

3

A label define um rótulo para um elemento input, dessa forma melhora a usabilidade do usuário, que não precisa clicar examente no input. Para isso, é necessário associar o for da label com o mesmo valor do id do input.

No seu caso, o ideal seria colocar o input dentro da label e customizar o layout diretamente nela.

Veja no exemplo abaixo.

label {
  width: 150px;
  display: block;
  background: #e5d86e;
  margin: 4px 0;
  padding: 10px 0;
}
<form>
  <label for="red"><input type="radio" id="red" value="red" name="color">Red</label>
  <label for="yellow"><input type="radio" id="yellow" value="yellow" name="color">yellow</label>
  <label for="blue"><input type="radio" id="blue" value="blue" name="color">Blue</label>
  <label for="green"><input type="radio" id="green" value="green" name="color">Green</label>
</form>

4
  • mas ai se eu coloco o visibility: hidden; ele para de funcionar, nao e?
    – Nathan
    Commented 6/03/2018 às 13:06
  • Funciona sim, mas daí você verifica o valor do checked do input, se é true ou false. Commented 6/03/2018 às 13:26
  • Mas por que ele só aparece true e false? Tem alguma maneira de escapar disso?
    – Nathan
    Commented 6/03/2018 às 20:16
  • Depende da sua necessidade. Se precisa pegar o valor daquele elemento utilize o atributo value. Se precisa saber se o elemento está checkado utilize o checked. Commented 7/03/2018 às 12:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .