Selecting next/previous radio button from selected one with vanilla Javascript

Question

I have a radio button group and I want to select the one next to the selected one.

so i want when event fired (in this case : user swipe left or right) then do check next or perv radio button.

i know it's can solve with jQuery but i search the workaround without any library.

var Current_tab = document.querySelector('input[name = "tabs"]:checked').id;

//on event do 

document.getElementById(Current_tab).nextSibling.checked = true; //Not work

document.getElementById(Current_tab).nextElementSibling.checked = true; //Not work

<input type="radio" name="tabs" id="tab4">
<label for="tab4">
  <span>One</span>
</label>

<input type="radio" name="tabs" id="tab3">
<label for="tab3">
  <span>Two</span>
</label>

<input type="radio" name="tabs" id="tab2">
<label for="tab2">
  <span>Three</span>
</label>

<input type="radio" name="tabs" id="tab1" checked="">
<label for="tab1">
  <span>Four</span>
</label>

The next radio button isn't the next sibling, there's a label between them. — Barmar, May 07 '19 at 15:22
@Barmar so is there any way to skip child's and get next same type (`input`) element.? — Mehdi Boveiri, May 07 '19 at 15:27

T.J. Crowder · Accepted Answer · 2019-05-07T15:31:09.767

Your attempts don't work because the radio buttons aren't immediately adjacent to each other, they have labels between them.

You could get a list of the radio buttons, find the selected one, and the select the next one after it:

const btns = [...document.querySelectorAll('input[name="tabs"]')];
const current = btns.findIndex(btn => btn.checked);
btns[(current + 1) % btns.length].checked = true;

function goToNextButton() {
    const btns = [...document.querySelectorAll('input[name="tabs"]')];
    const current = btns.findIndex(btn => btn.checked);
    btns[(current + 1) % btns.length].checked = true;
}
setInterval(goToNextButton, 800);

<input type="radio" name="tabs" id="tab4">
<label for="tab4">
<span>One</span>
</label>

<input type="radio" name="tabs" id="tab3">
<label for="tab3">
<span>Two</span>
</label>

<input type="radio" name="tabs" id="tab2">
<label for="tab2">
<span>Three</span>
</label>

<input type="radio" name="tabs" id="tab1" checked="">
<label for="tab1">
<span>Four</span>
</label>

That code works on reasonably modern browsers. If you have to support older ones, you may need to fall back to ES5-level code (or transpile), and/or you may need to polyfill iterability as shown here.

Or for a boring ES5 solution :-):

var btns = document.querySelectorAll('input[name="tabs"]');
var n;
for (n = 0; n < btns.length; ++n) {
    if (btns[n].checked) {
        break;
    }
}
if (n < btns.length) {
    n = (n + 1) % btns.length;
}
btns[n].checked = true;

function goToNextButton() {
    var btns = document.querySelectorAll('input[name="tabs"]');
    var n;
    for (n = 0; n < btns.length; ++n) {
        if (btns[n].checked) {
            break;
        }
    }
    if (n < btns.length) {
        n = (n + 1) % btns.length;
    }
    btns[n].checked = true;
}
setInterval(goToNextButton, 800);

<input type="radio" name="tabs" id="tab4">
<label for="tab4">
<span>One</span>
</label>

<input type="radio" name="tabs" id="tab3">
<label for="tab3">
<span>Two</span>
</label>

<input type="radio" name="tabs" id="tab2">
<label for="tab2">
<span>Three</span>
</label>

<input type="radio" name="tabs" id="tab1" checked="">
<label for="tab1">
<span>Four</span>
</label>

score 1 · Answer 2 · answered May 07 '19 at 15:38

You can use querySelectorAll and find checked index by for loop

<input type="radio" name="tabs" id="tab4" >
     <label for="tab4">
<span>One</span>
     </label>

<input type="radio" name="tabs" id="tab3">
     <label for="tab3">
<span>Two</span>
     </label>

<input type="radio" name="tabs" id="tab2" checked="">
     <label for="tab2">
 <span>Three</span>
     </label>

<input type="radio" name="tabs" id="tab1">
     <label for="tab1">
        <span>Four</span>
   </label>
   
   <script>
    var tab = document.querySelectorAll('input[name = "tabs"]');
    for(i = 0; i< tab.length; i++){
   console.log(tab[i].checked);
   if(tab[i].tagName != undefined && tab[i].checked) {
    if(tab[i+1] != undefined){
    tab[i+1].checked = true;
    }
    }
    }

   
   </script>

score 0 · Answer 3 · answered May 07 '19 at 15:29

The nest radio button isn't the next sibling, it's the 2nd sibling after, since there's a <label> after each radio button.

You also need to check that it's not the last button.

document.querySelector("#next").addEventListener("click", () => {
  let current = document.querySelector('input[name = "tabs"]:checked')
  let nextButton = (current.nextElementSibling && current.nextElementSibling.nextElementSibling) || document.querySelector('input[name="tabs"]:first-child');
  if (nextButton) {
    nextButton.checked = true;
  }
});

<div>
  <input type="radio" name="tabs" id="tab4">
  <label for="tab4">
    <span>One</span>
  </label>

  <input type="radio" name="tabs" id="tab3">
  <label for="tab3">
    <span>Two</span>
  </label>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">
    <span>Three</span>
  </label>

  <input type="radio" name="tabs" id="tab1" checked="">
  <label for="tab1">
    <span>Four</span>
  </label>
</div>
<button id="next">Select next</button>

is (`nextElementSibling.nextElementSibling`) is safe for dynamic find elements.? — Mehdi Boveiri, May 07 '19 at 15:46
Why wouldn't it be? I protect it by first checking that `current.nextElementSibling` exists. — Barmar, May 07 '19 at 15:47

Selecting next/previous radio button from selected one with vanilla Javascript

3 Answers3