CODEWITHSUNDEEP
htmlforms
alice83
alice83

Reputation: 43

HTML radio buttons allow the selection of multiple options

I am trying to work on making a test for a website using JavaScript. I am not good at javascript though, so I am at a complete loss.

I don't know why but my radio buttons will let me select multiple in the same section, I thought this was only supposed to happen with checkboxes.

On the issue of the javascript I would like to be able to do something like saying if yes, no, yes are seleted display this results a.with each ansswer being from the next section. I don't know how to reference them though.

This is my HTML:

<form>
<fieldset>
<div class="col">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="yes" id="yes" value="yes" />
<label> yes</label>
</div>
<input type="radio" name="no" id="no" value="no" />
<label>  no </label>
</fieldset>
</form>

Thank you!

Upvotes: 0

Views: 2935

Answers (2)

GaruGraph
GaruGraph

Reputation: 1

You have to add the same word in the attribute of "name"

Try it :

<form>
   <fieldset>
      <div class="col">
        <legend>Have you had your record expunged before?</legend>
        <input type="radio" name="choix" id="yes" value="yes" />
        <label for="yes"> yes</label>
      </div>
      <input type="radio" name="choix" id="no" value="no" />
      <label for="no">  no </label>
   </fieldset>
   <button type="submit">Envoyer</button>
</form>

Upvotes: -1

doubleOrt
doubleOrt

Reputation: 2507

MDN says:

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to "contact" but one with the value "email", one with the value "phone", and one with the value "mail". The user never sees the value or the name (unless you expressly add code to display it).

So, it is because your radio buttons have different names, they should have the same name and different values.

Try giving radio buttons of the same group the same name value:

<form>
<fieldset>

<div class="col">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="yes_or_no" id="yes" value="yes" />
<label> yes</label>
</div>

<input type="radio" name="yes_or_no" id="no" value="no" />
<label>  no </label>

</fieldset>
</form>

Upvotes: 3

Related Questions