CODEWITHSUNDEEP
htmlformsradio-button
nviens
nviens

Reputation: 447

Radio buttons selecting multiple options

Okay so I'm working on a project for my computer class and we're using radio buttons within a form. Part of the requirements are to ensure that when the submit button is clicked it is not left blank and that only one radio button is clicked.

Whenever I have worked with radio buttons it only allows you to click one, so I was confused by the requirement. I even went to W3 Schools HTML Forms Input Types and confirmed that only one radio box can be selected at a time.

After contacting my TA though he sent me the following code which allows multiple radio buttons to be selected. Any clarification about why the following code allows multiple radio buttons to be selected and if my knowledge on radio buttons is correct would be wonderful. Thanks in advance.

<html>
    <head>
    
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    
    <body>
    <div>

    <form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}">
    <input type="radio"> one<br>
    <input type="radio"> two<br>
    <input type="radio"> three<br>

    </form>
    </div>
    </body>
    </html>

JSFiddle

Upvotes: 1

Views: 16911

Answers (5)

virat
virat

Reputation: 99

This happens because you need to provide same name attribute when input type is radio:

<form method="post" action="">
<input type="radio" name="radio">one
<br>
<input type="radio" name="radio">Two
<br>
<input type="radio" name="radio">Three
<br>
</form>

Upvotes: 1

Prosen Ghosh
Prosen Ghosh

Reputation: 655

you have to put them in a group.You can do it like this

<form action="">
  <input type="radio" name="gender" checked> Male<br>
  <input type="radio" name="gender" > Female<br>
  <input type="radio" name="gender" > Other
</form>

if you use the same name it's consider as a group. name="gender" like this.

Upvotes: 2

ooredroxoo
ooredroxoo

Reputation: 290

Radio buttons needs to share the same name attribute to behave like that. To put in other words only one radio button with the same name could be checked at once.

As said by MDN

radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at a time.

Here is your code adjusted to behave like that.

<html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
    <div>
    <form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}">
    <input type="radio" name="field"> one<br>
    <input type="radio" name="field"> two<br>
    <input type="radio" name="field"> three<br>
    </form>
    </div>
    </body>
</html>

So its up to you what approach do you wanna use.

Upvotes: 0

Matt
Matt

Reputation: 396

Radio buttons need to be part of a group for a maximum of one to be selected. The group is denoted with the name attribute. All radio buttons in a group should have the same name.

Here's your updated fiddle: https://jsfiddle.net/8fn0hfoh/1/

Upvotes: 0

Joseph Young
Joseph Young

Reputation: 2795

The inputs do not have the name attribute set, therefore they are not grouped

As you can see here, the radio buttons only allow one selection when named:

<div>
<form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}">
<input name="group_name" type="radio"> one<br>
<input name="group_name" type="radio"> two<br>
<input name="group_name" type="radio"> three<br>
</form>
</div>

jsfiddle

That being said, I don't know why you are being told to use radio buttons for multiple selections. They are most definitely not intended for that

Upvotes: 1

Related Questions