Radio button assignment via div

Question

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

In my PHP I’m receiving the posts and I’m already checking the answers with if. My problem is, in the layout there’s no such thing as that little ball of radio button... it just picks up through the for but I don’t know what’s going on that’s not working.

So far he’s this way:

And it’s supposed to be this way:

And my code is this:

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

In short, I want you to click the buttao div and the value is inserted so that php recognizes the post

Obs: If I click on the radio button it works... if I click on the shape of the button it does not apply the value

Answer 1

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

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

See in 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>