Assigning the radio button through the div

Question

Assigning the radio button through the div

Navigation

#1 by (3 votes)

0

I need to do a simple questionnaire and multiple choice answers, in this case I chose the radio button ...

In my PHP I'm getting the posts and I'm already doing the verification of responses with if . My problem is, in the layout there is no ball of the radio button ... it simply picks through for but I do not know what is happening that is not working.

So far it looks like this:

Andit'stobethisway:

Andmycodeisthis:

-HTML

<divclass="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"});
});

In summary, I want you to click on the div of the buttao and the value is entered for php to recognize the post

obs : Your I click on the radio button it works ... if I click on the div that makes the button it does not apply value

javascript html html5 css css3

asked by anonymous 06.03.2018 / 05:15

1 answer

How to increment + 1h between two dates using php? What is the default value of MAIL_ENCRYPTION in Laravel 5.6?

score 3 · Accepted Answer

label defines a label for a input element, thereby improving user usability, which does not need to click exotically on input . For this, it is necessary to associate for of label with the same value of id of input .

In your case, it would be ideal to put input inside label and customize the layout directly in it.

See the example below.

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>