Question

我有一个单选按钮组，我想选择一个按钮组。

所以我想在事件触发时（在这种情况下：用户向左或向右滑动）然后检查next或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级别的代码（或可转换），和/或可能需要对迭代性进行as shown here填充。

或者对于无聊的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

嵌套单选按钮不是下一个兄弟姐妹，而是第二个兄弟姐妹，因为每个单选按钮后面都有一个<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>

使用香草Javascript从所选的一个中选择下一个/上一个单选按钮

3 个答案: