使用香草Javascript從所選的一個中選擇下一個/上一個單選按鈕

Question

我有一個單選按鈕組，我想選擇一個按鈕組。

所以我想要事件觸發時（在這種情況下：用戶向左或向右滑動），然后檢查下一個或perv單選按鈕。

我知道可以用jQuery解決，但我沒有任何庫就搜索解決方法。

 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

您的嘗試不起作用，因為單選按鈕不是緊挨着彼此，而是在它們之間帶有label 。

您可以獲得單選按鈕的列表，找到選定的按鈕，然后選擇其后的下一個按鈕：

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> 

該代碼可在相當現代的瀏覽器上運行。 如果您必須支持較舊的代碼，則可能需要退回到ES5級別的代碼（或轉換），和/或可能需要如此處所示進行polyfill迭代。

或對於無聊的ES5解決方案:-)：

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

您可以使用querySelectorAll並通過for循環查找checked索引

 <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

Nest單選按鈕不是下一個兄弟姐妹，它是第二個兄弟姐妹，因為每個單選按鈕后面都有一個<label> 。

您還需要檢查它是否不是最后一個按鈕。

 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>