HTML

<button onclick="slideMe(-1)"></button>
<input checked type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<button onclick="slideMe(1)"></button>

JS

function slideMe(dir) {
var inputs, slides, i;
inputs = document.getElementsByName("slider");
for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked == true) {
        inputs[i].checked = 0;
        if (i > 0 && i < 7 || dir == -1) {
            inputs[i + dir].checked = true;
            break;
        } else if (i = 0) {
            inputs[8].checked = true;
            break;
        } else {
            inputs[0].checked = true;
            break;

            }
        }
    }
}

这是JsFiddle example

Answer 1

我更改了 slideMe 功能。

首先，我获取当前检查输入的索引并将其分配给变量（ currIndex ）。

之后，根据 dir 的值，我增加（如果dir == 1）或减少（如果dir == -1） currIndex 的值。并应用其他条件。

function slideMe(dir) {
    var inputs, currIndex;
    inputs = document.getElementsByName("slider");

    for(var i=0; i<inputs.length;i++)
    {
        if(inputs[i].checked==true)
        {
          currIndex = i;
          inputs[i].checked = false;
        }
    }

    if(dir == 1)
    {
        currIndex++;

        if(currIndex == (inputs.length))
          currIndex = 0;
    }
    else
    {
        currIndex--;   

        if(currIndex == -1)
          currIndex = (inputs.length-1);
    }

    inputs[currIndex].checked = true;
}

JS Fiddle示例。

Answer 2

试试此代码

   function slideMe(dir) {
      var inputs, slides, i;
      inputs = document.getElementsByName("slider");
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked == true) {
          inputs[i].checked = false;
          if (i > 0 && i < inputs.length && i + dir < inputs.length) {
            inputs[i + dir].checked = true;
            break;
          } else if (i == 0 && dir == 1) {
            inputs[i + dir].checked = true;
            break;
          } else if (i == 0 && dir == -1) {
            inputs[inputs.length - 1].checked = true;
            break;
          } else if (i + dir == inputs.length) {
            inputs[0].checked = true;
            break;

          }
        }
      }
    }

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <button onclick="slideMe(-1)"></button>
  <input checked type="radio" name="slider" id="slide1">
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">
  <input type="radio" name="slider" id="slide4">
  <input type="radio" name="slider" id="slide5">
  <button onclick="slideMe(1)"></button>
</body>

</html>

使用按钮标签和js更改已选中的单选按钮

HTML

JS

2 个答案: