Radio buttons not working in HTML

← Back to Community

Radio buttons not working in HTML

Profile icon

RixTheTyrunt

Please help, I want to fix one of bugs, and here's what you can/can't do with it:

You can select all options
When at least one option is selected, it can't be not selected. It'll always "stand" as selected. Try it: https://smartpreview.rixthetyrunt.repl.co/

Halp me

Answered by NFadhlurrahman [earned 5 cycles]

View Answer

Voters

Profile icon

RixTheTyrunt

Comments

hot new top

Profile icon

NFadhlurrahman

You can select all options

To fix this bug, all of the radio buttons must have the same value of the name attribute.

Example:


<input type="radio" name="device" id="smartphoneValue" value="Smartphone" selected>
<input type="radio" name="device" id="tabletValue" value="Tablet">
<input type="radio" name="device" id="laptopValue" value="Laptop">

Profile icon

RixTheTyrunt

( <<:D) ( Kaomojis look like Tyrunts right now ) It works!

Profile icon

FordKen

I found a plugin used on a website - https://radiofmluisteren.nl/ that might give you some ideas!

Profile icon

AmoghTheCool

@RixTheTyrunt

I see what you mean, a better way to do this is to use the select tag with option children:


<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

I think that to get the data, you have to use select_item.selectedIndex and that returns an index of the options that shows which one is selected, so select_item.options[select_item.selectedIndex].innerText is the option which is selected. options can be selected and unselected and only one can be selected.

As far as I know, radio buttons are always multiselect and anyway
a dropdown is more appropriate for the situation.

Profile icon

RixTheTyrunt

I see what you mean, a better way to do this is to use the select tag with option children:

Check the answer! I hope that will improve your coding... ( <<:P)