Question

我正在处理一些代码，它接受单选按钮的选定值并将其传递给下一组单选按钮以用作输入。第一次传递时代码运行良好，但随后的任何时间，它都会通过＆＃34; on。＆＃34;而不是传递值。我认为这只是一些愚蠢的事情，但我还没能弄清楚。

这是HTML和JS：

<div class="container">
  <ul class="aaa">
    <li>
      <input type="radio" name="g1" id="i1" value="s#1" data-target="r65">
      <label id="r1" for="i1">s#1</label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
    <li>
      <input type="radio" name="g1" id="i2" value="s#16" data-target="r65">
      <label id="r2" for="i2">s#16</label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
  </ul>
</div>
<div class="container">
  <ul class="aaa">
    <li>
      <input type="radio" name="g2" id="i3" value="s#8" data-target="r66">
      <label id="r3" for="i3">s#8</label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
    <li>
      <input type="radio" name="g2" id="i4" value="s#9" data-target="r66">
      <label id="r4" for="i4">s#9</label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
  </ul>
</div>
<div class="container">
  <ul class="aaa">
    <li>
      <input type="radio" name="g33" id="i65" data-target="r97">
      <label id="r65" for="i65"></label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
    <li>
      <input type="radio" name="g33" id="i66" data-target="r97">
      <label id="r66" for="i66"></label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
  </ul>
</div>

<div class="container">
  <ul class="aaa">
    <li>
      <input type="radio" name="g49" id="i97" data-target="r113">
      <label id="r97"></label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
    <li>
      <input type="radio" name="g49" id="i98" data-target="r113">
      <label id="r98"></label>
      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
  </ul>
</div>

JS

const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
  inp.addEventListener("change", function() {
    let targetLabel = document.getElementById(inp.dataset.target);
    let targetRadio = targetLabel.previousSibling;
    targetLabel.innerHTML = inp.value;
    targetRadio.value = inp.value;
    targetRadio.checked = false;
    //while there is a next target clear it
    while (targetLabel.previousSibling.hasAttribute) {
      targetLabel = document.getElementById(targetRadio.dataset.target);
      targetRadio = targetLabel.previousSibling;
      targetRadio.checked = false;
      targetLabel.innerHTML = '';
    }
  });
}

Answer 1

previousSibling属性返回指定节点的上一个节点，位于同一树级别。

返回的节点作为Node对象返回。

此属性与previousElementSibling之间的区别在于previousSibling将上一个兄弟节点作为元素节点，文本节点或注释节点返回，而previousElementSibling将前一个兄弟节点作为元素节点返回（忽略文本和注释节点）。

const inputs = document.querySelectorAll("input[type=radio]");

for (let inp of inputs) {
  inp.addEventListener("change", function() {
    let targetLabel = document.getElementById(inp.dataset.target);
    console.log(targetLabel);
    let targetRadio = targetLabel.previousElementSibling;
    
    targetRadio.value = inp.value;
    targetLabel.innerHTML = inp.value;
   
    targetRadio.checked = false;
    //while there is a next target clear it
     while (targetLabel.previousElementSibling.hasAttribute) {
      targetLabel = document.getElementById(targetRadio.dataset.target);
      targetRadio = targetLabel.previousSibling;
      targetRadio.checked = false;
      targetLabel.innerHTML = '';
    }
  });
}

多次传递单选按钮值

1 个答案: