CODEWITHSUNDEEP
c#asp.netwebforms
Outrigger
Outrigger

Reputation: 57

Change the tab order of radio button groups in Html Page

If I have two radio button groups (grouped using the name attribute) on a webpage, is it possible to alter the order in which they are moved though when using the TAB key?

<input type="radio" name="group1" value="1">One<br/>
<input type="radio" name="group1" value="2">Two<br/>
<input type="radio" name="group1" value="3">Three<br/>
<br/>
<input type="radio" name="group2" value="a">A<br/>
<input type="radio" name="group2" value="b">B<br/>
<input type="radio" name="group2" value="c">C<br/>

https://jsfiddle.net/Wholesaler/4xqcoz3p/

In the markup above, I have two groups. When TAB is pressed the upper group will be focused and when pressed again focus moves to the lower group. My query is whether this default order can be overridden so that the lower group is focused first.

To clarify, I do not want to be able to TAB between the individual radio buttons in each group, just change the tab order for the groups they belong to.

Upvotes: 1

Views: 338

Answers (1)

Deepak Sharma
Deepak Sharma

Reputation: 4170

tabIndex is there for that purpose.

check the fiddle https://jsfiddle.net/stdeepak22/r3sphzvf/

Upvotes: 1

Related Questions