CODEWITHSUNDEEP
html
Tarun Jain
Tarun Jain

Reputation: 27

What is the difference between Radio type and check box type in the html code?

What is the difference between Radio type and check box type in the html code ?

Upvotes: 1

Views: 3305

Answers (3)

Alexander Rice
Alexander Rice

Reputation: 160

I'll use an example based on MDN's radio button documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

They make a note of the important distinction:

Note: Checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

Select a maintenance drone:
○ Huey
○ Dewey
○ Louie

The user is prompted to select a maintenance drone out of three options with radio buttons. They only get one drone, so the radio button enforces that only one can be checked. The user gets one choice: Which maintenance drone do you want? This choice is a which of these question.

Select your maintenance drone(s):
☐ Huey
☐ Dewey
☐ Louie

Lets recreate this example with checkboxes instead. The user can now select all of the drones or none of them because checkboxes allow the user to check as many or as few boxes as they want. The user has multiple choices: Do you want the Huey maintenance drone? (Y/N); Do you want the Dewey maintenance drone? (Y/N); Do you want the Louie maintenance drone? (Y/N). This is a series of Yes-or-No questions.

Upvotes: 0

Crazybud
Crazybud

Reputation: 363

Both are user input type which can be used in forms but from a group of Radio buttons, only one can be selected. On the other side, from a group of checkboxes, any number of checkboxes can be selected.

Examples of when to use them:

CHECKBOX:

1.Your Fav Sports:

[ ] Cricket

[ ] Football

[ ] Tennis

[ ] Badminton

Answer can be 1 or many options for above question.

RADIO BUTTON:

2 Your Gender:

O Male

O Female

O Other

For the above question, only one option can be valid and hence the user can be forced to pick only one.

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17467

A radio input provides a single-selection user choice. It is often depicted as a empty circle (unselected) and filled circle (selected).

A checkbox input provides a multi-selection user choice. It is often depicted as an empty square (unselected) and a checkmark within a square (selected).

Semantically, the only difference between the two HTML elements is the type="radio" attribute for radio options and type="checkbox" attribute for checkbox options. Related elements should have the same name attribute.

<fieldset>
  <legend>Radio Selection</legend>
  <label><input type="radio" name="radio" value="1">Option 1</label>
  <label><input type="radio" name="radio" value="2">Option 2</label>
  <label><input type="radio" name="radio" value="3">Option 3</label>
</fieldset>

<fieldset>
  <legend>Checkbox Selection</legend>
  <label><input type="checkbox" name="checkbox" value="1">Option 1</label>
  <label><input type="checkbox" name="checkbox" value="2">Option 2</label>
  <label><input type="checkbox" name="checkbox" value="3">Option 3</label>
</fieldset>

Upvotes: 4

Related Questions