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> 

Answer 1

Your attempts don't work because the radio buttons aren't immediately adjacent to each other, they have label s 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> 

Answer 2

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> 

Answer 3

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>