How to allow only one radio button to be checked?

Question

{% for each in AnswerQuery %}
    <form action={{address}}>
        <span>{{each.answer}}</span><input type='radio'>
        <span>Votes:{{each.answercount}}</span>
        <br>
    </form>
{% endfor %}

This is a part my django template, what it supposed to do is to print out several radio buttons, corresponding to the answers assigned to the buttons. But I don't know why I can check multiple radio buttons, which messed me up. It is supposed to only let me check on one radio button and I had that somehow but I lost it. Any help? Thank you.

score 594 · Accepted Answer · answered Mar 24 '11 at 12:55

594

Simply give them the same name:

<input type="radio" name="radAnswer" />

answered Mar 24 '11 at 12:55

Shadow The GPT Wizard

66,030
26
140
208

1

OMG... well, if I dont assign names to them. they all should have empty string as name by default right? Thank you – Clinteney Hui Mar 24 '11 at 12:58
27

@Clinteney without a name they're not really part of the form and their value won't be sent when submitting the form. The name is used by the browser to set "groups" of radio buttons, only one radio button in each group can be selected at one time and selecting other will clear the previous selection. :) – Shadow The GPT Wizard Mar 24 '11 at 13:02
For the project I just inherited, both radio buttons on my form MUST be named differently. One field is an ALL field, the other field is dynamic, based on a value in the URL. They want the user to only be able to select one radio. – user3120861 Jul 24 '20 at 17:06
@user3120861 so the only way is by using client side code, i.e. JavaScript. It's possible with plain JS, but easier with jQuery. For more details, please hit me up on chat, and if we'll get something I'll add to the answer. Cheers! :) – Shadow The GPT Wizard Jul 24 '20 at 17:38

score 70 · Answer 2 · answered Mar 24 '11 at 12:55

70

They need to all have the same name.

answered Mar 24 '11 at 12:55

Douglas

36,802
9
76
89

score 52 · Answer 3 · edited Mar 24 '11 at 21:40

52

All radio buttons have to have the same name:

<input type='radio' name='foo'>

Only 1 radio button of each group of buttons with the same name can be checked.

edited Mar 24 '11 at 21:40

Jack M.

30,350
7
55
67

answered Mar 24 '11 at 12:57

Nick

1,904
1
17
34

score 25 · Answer 4 · answered Mar 24 '11 at 12:58

25

Give them the same name, and it will work. By definition Radio buttons will only have one choice, while check boxes can have many.

<input type="radio" name="Radio1" />

answered Mar 24 '11 at 12:58

FluxEngine

12,730
14
57
83

score 19 · Answer 5 · answered Dec 28 '18 at 11:49

Add "name" attribute and keep the name same for all the radio buttons in a form.

i.e.,

<input type="radio" name="test" value="value1"> Value 1
<input type="radio" name="test" value="value2"> Value 2
<input type="radio" name="test" value="value3"> Value 3

Hope that would help.

score 11 · Answer 6 · edited Sep 03 '17 at 19:04

11

Just give them the same name throughout the form you are using.

<form><input type="radio" name="selection">
      <input type="radio" name="selection">
      ..
      ..
</form>

edited Sep 03 '17 at 19:04

CaptJak

3,592
1
29
50

answered Sep 08 '16 at 09:31

VinayKumar.M

147
1
4

B.K · Answer 7 · 2018-03-29T07:08:32.603

5

All the radio buttons options must have the same name for you to be able to select one option at a time.

edited Mar 29 '18 at 07:08

answered Nov 28 '17 at 10:56

B.K

847
10
6

@PHPer maybe because he gave the same answer as the accepted answer but 6 years later... – norcal johnny Nov 18 '19 at 09:04
@norcaljohnny Should be reported/flagged but just voting it down is as innacurate – PHPer Nov 18 '19 at 12:44
@PHPer take it easy mate. I never said I downvoted it, I merely replied to your comment, as to why, it may have been downvoted. – norcal johnny Nov 18 '19 at 13:14

score 1 · Answer 8 · answered Oct 30 '21 at 13:37

Only one Step you need to follow!

Make Sure you need to add the attribute name in the opening tag with the same values of that attribute name!

Example :

<input name="18+" value="yes" id="18" type="radio">Yes
  <input name="18+" value="No" id="bel" type="radio">No

How to allow only one radio button to be checked?

8 Answers8

Only one Step you need to follow!

Linked

Related