team1

team1

关注
发信
关注(28)粉丝(399)

javascript - 如何在Javascript中级联单选按钮？

我是编程新手，要负责创建可点击的锦标赛括号。 8个团队，您可以在其中挑选获胜者，他们将进入下一轮。

我遇到的问题是，当一个人填写完括号后想要在第一轮或第二轮中修改选秀权时。

例如，在第一轮中，用户选择：


Team1诉Team8->＃1继续前进
Team4诉Team5->＃4继续前进
Team3诉Team6->＃3继续前进
Team2诉Team7->＃2继续前进


在第二轮中，假设他们选择：


Team1诉Team4->＃1继续前进
Team2诉Team3->＃2继续前进


在总决赛中，他们选择：


Team1诉Team2->＃1获胜。


然后，假设用户改变了主意，并选择Team8在第一轮中使Team1感到不安。现在，代码仍将Team1视为获胜者，并在最后一场比赛中。如何删除当前显示Team1的以后回合的文字？

在此处附加JSFiddle：https://jsfiddle.net/a4hya2c7/5/或参见以下代码：

<!DOCTYPE html>
<html>
   <head>
      <title>Button</title>
   </head>
   <body>
      <p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" onclick="changeText(this.value);"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" onclick="changeText(this.value);"><label id="r2">#8</label></br>
         <input type="radio" name="g2" id="i3" value="#4" onclick="changeText2(this.value);"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" onclick="changeText2(this.value);"><label id="r4">#5</label></br>
         <input type="radio" name="g3" id="i5" value="#3" onclick="changeText3(this.value);"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" onclick="changeText3(this.value);"><label id="r6">#6</label></br>
         <input type="radio" name="g4" id="i7" value="#7" onclick="changeText4(this.value);"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" onclick="changeText4(this.value);"><label id="r8">#2</label></br>
      </div>
      </br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" onclick="changeText5(this.value);"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" onclick="changeText5(this.value);"><label id="r10"></label></br>
         <input type="radio" name="g6" id="i11" onclick="changeText6(this.value);"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" onclick="changeText6(this.value);"><label id="r12"></label></br>
      </div>
      </br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" onclick="changeText7(this.value);"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" onclick="changeText7(this.value);"><label id="r14"></label></br>
      </div>
      </br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label></br>
      </div>
      </br>
   </body>
</html>


JS：

function changeText(value) {
    document.getElementById('r9').innerHTML = value;
    document.getElementById('i9').value = value;
}

function changeText2(value) {
    document.getElementById('r10').innerHTML = value;
    document.getElementById('i10').value = value;
}

function changeText3(value) {
    document.getElementById('r11').innerHTML = value;
    document.getElementById('i11').value = value;
}

function changeText4(value) {
    document.getElementById('r12').innerHTML = value;
    document.getElementById('i12').value = value;
}

function changeText5(value) {
    document.getElementById('r13').innerHTML = value;
    document.getElementById('i13').value = value;
}

function changeText6(value) {
    document.getElementById('r14').innerHTML = value;
    document.getElementById('i14').value = value;
}
function changeText7(value) {
    document.getElementById('r15').innerHTML = value;
    document.getElementById('r15').value = value;
}

最佳答案

首先，您的<br>标记不正确，因为您可以在此处看到：

</div>
</br>


您正在使用的关闭标签没有打开。您可以使用：

<br/>


或使用较新的html5自闭合标签样式：

<br>


至于JS本身，如果使用属性，可以将其简化很多，类似于已经使用name指出必须将值放在何处的属性。有了这一更改，代码将变得更小，更简单：



const inputs = document.querySelectorAll("input[type=radio]");

for (let inp of inputs){
  inp.addEventListener("change", function(){
    let targetLabel = document.getElementById(inp.dataset.target);
    targetLabel.previousSibling.value = inp.value;
    targetLabel.innerHTML = inp.value;
  });
}

<p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
         <input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
         <input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
         <input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
      </div>
      <br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
         <input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
      </div>
      <br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
      </div>
      <br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label><br>
      </div>
      <br>





请注意，我设置的目标直接位于标签上：

<input type="radio" ... data-target="r9">


然后使用previousSibling到达相应的收音机。

我使用了一些您可能不知道的功能：


querySelectorAll-获取与传递的选择器匹配的元素数组
for ... of迭代querySelectorAll检索的所有输入
addEventListener-直接在Javascript上设置事件处理程序并使代码更简洁


只需使用少量的Javascript代码，您便具有相同的功能，最重要的是，无需重复代码。

现在，如果您希望将第一个无线电的更改级联到较低的无线电，则可以直接使用以下命令调用更改事件：

const event = new Event('change');
element.dispatchEvent(event);


每当您看到目标元素已经设置了值时。这类似于递归调用：



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;
    targetRadio.value = inp.value;
    targetLabel.innerHTML = inp.value;

    //if this isn't the last and it's checked, to not cascade non selected radios
    if (targetRadio.hasAttribute && targetRadio.checked){
      const nextTargetLabel = document.getElementById(targetRadio.dataset.target);

      if (nextTargetLabel.innerHTML != ''){ //if it has a value then cascade
          targetRadio.dispatchEvent(new Event('change'));
      }
    }
  });
}

<p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
         <input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
         <input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
         <input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
      </div>
      <br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
         <input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
      </div>
      <br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
      </div>
      <br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label><br>
      </div>
      <br>





编辑：

要清除以下单选而不是级联值，可以使用while，并使用targets导航到末尾：



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;

     //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 = '';
    }
  });
}

<p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
         <input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
         <input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
         <input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
      </div>
      <br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
         <input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
      </div>
      <br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
      </div>
      <br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label><br>
      </div>
      <br>

关于javascript - 如何在Javascript中级联单选按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49102019/

10-12 00:55
Powered by LMLPHP ©2024 team1 0.033973