如何使 HTML 单选按钮表单更改另一个框中的值？

问题描述 投票：0回答：1

我正在尝试使用单选按钮制作一个标题。到目前为止，我有一个带有单选按钮的表单，顶部有一个用于评分的部分。我想知道是否有一种方法可以对成绩部分进行编程，以自动填写点击“GO”按钮的百分比。

我知道表格现在看起来有点奇怪，但很快就完成了调整以显示我正在谈论的内容。

我对 HTML 还很陌生，我觉得到目前为止我所有的谷歌搜索尝试都没有结果。希望有人可以帮助我。或者告诉我我完全错了，并引导我走向正确的方向。在此处输入图像描述

html forms radio-button
1个回答
0
投票

由于您没有提供您的 

code
并且没有足够的详细信息“
grades
应该如何工作？”或“
grades
的目的是什么？”。所以，我建立了一个概念，如果用户点击 
Go
那么 
grades
就会 
count up
，如果用户点击 
No-Go
那么它就会 
count down
。我使用 
JavaScript
来处理用户交互。您可以根据自己的喜好调整概念。

这是

code
：

document.addEventListener("DOMContentLoaded", function () {
  let goCount = 0;
  let noGoCount = 0;

  const currentSelection = {
    thing_1: null,
    thing_2: null,
    thing_3: null,
  };

  function updateGrade() {
    const grade = Math.max(goCount - noGoCount, 0);
    document.getElementById("grades").textContent = grade;
  }

  const radios = document.querySelectorAll("input[type=radio]");
  radios.forEach((radio) => {
    radio.addEventListener("change", function () {
      const question = this.name;
      const value = this.value;

      if (currentSelection[question] === "1") {
        goCount--;
      } else if (currentSelection[question] === "0") {
        noGoCount--;
      }

      currentSelection[question] = value;

      if (value == "1") {
        goCount++;
      } else if (value == "0") {
        noGoCount++;
      }

      updateGrade();
    });
  });
});
.grade-container {
  display: flex;
  gap: 5px;
}

#grades {
  border: 1px solid gray;
  width: 50px;
  padding: 0 0 0 3px;
}

.performance-container {
  padding: 0 50px;
}

.question-container {
  border: 1px solid gray;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-container p {
  padding: 0;
  margin: 0;
}

.inputs-container {
  display: flex;
  gap: 20px;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Grading System</title>
  </head>
  <body>
    <div class="grade-container">
      <div>Grade</div>
      <div id="grades">0</div>
    </div>

    <p>Do all the stuff you're meant to do.</p>

    <div class="performance-container">
      <h3>Performance Measures</h3>

      <div class="question-container">
        <p>Thing 1</p>

        <div class="inputs-container">
          <div>
            <input type="radio" value="1" name="thing_1" />
            <label>Go</label>
          </div>
          <div>
            <input type="radio" value="0" name="thing_1" />
            <label>No-Go</label>
          </div>
        </div>
      </div>

      <div class="question-container">
        <p>Thing 2</p>

        <div class="inputs-container">
          <div>
            <input type="radio" value="1" name="thing_2" />
            <label>Go</label>
          </div>
          <div>
            <input type="radio" value="0" name="thing_2" />
            <label>No-Go</label>
          </div>
        </div>
      </div>

      <div class="question-container">
        <p>Thing 3</p>

        <div class="inputs-container">
          <div>
            <input type="radio" value="1" name="thing_3" />
            <label>Go</label>
          </div>
          <div>
            <input type="radio" value="0" name="thing_3" />
            <label>No-Go</label>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.