How do I make an HTML radio button form change the value in another box?

Question

I am trying to make a rubric using radio buttons. So far, I have a form with radio buttons and a section at the top for the grade. I'm wondering if there is a way to program the grade section to automatically fill in with the percent of how many "GO" buttons are clicked.

I know the form looks a little wonky right now, but that was done quickly to adjust for showing what I'm talking about.

I'm pretty new to HTML and I feel like all of my Googling attempts have been fruitless thus far. Hopefully someone can help me out. Or tell me I'm just plain wrong and steer me in the right direction.

Answer 1

I didn't give any attention to the styling as this is not a question of styling. You can change the style as you need.

You need to run a script whenever an input change within the container that contains all the "things" changes. That can be done by using addEventListener.
Next you need to count the amount of "things" you have. That I have done by counting the containers of the "Go/No-Go" sets with querySelectorAll and length.
After that you need to count the length of the selected "Go"s by using the methods again. The CSS selector for that is: [value="Go"]:checked.
Last, you need to calculate the percentage by dividing the amount of the selected "GO"s by the amount of sets. You can use a progressbar or an output to display within your HTML document.

PerformancePoints.addEventListener('change', function() {
  // count the amount of Go/No-Go sets
  const ThingSetLength = this.querySelectorAll('fieldset').length;

  // count the amount of selected GOs
  const SelectedGoLength = this.querySelectorAll('[value="Go"]:checked').length;

  // calculate percentage of selected GOs
  const PercentageGo = (SelectedGoLength / ThingSetLength * 100).toFixed(2);

  // output the percentage
  ProgressGo.value = PercentageGo;
})

progress {
  text-align: center;
  &::after {
    content: attr(value)'%';
  }
}

<div id="PerformancePoints">

  <label for="ProgressGo">Grade</label>
  <progress min="0" max="100" value="0" id="ProgressGo"></progress>

  <fieldset>
    <legend>Thing 1</legend>
    <div>
      <input type="radio" id="GoThingA" name="ThingA" value="Go">
      <label for="GoThingA">Go</label>
    </div>
    <div>
      <input type="radio" id="NoGoThingA" name="ThingA" value="NoGo">
      <label for="NoGoThingA">No-Go</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Thing 2</legend>
    <div>
      <input type="radio" id="GoThingB" name="ThingB" value="Go">
      <label for="GoThingB">Go</label>
    </div>
    <div>
      <input type="radio" id="NoGoThingB" name="ThingB" value="NoGo">
      <label for="NoGoThingB">No-Go</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Thing 3</legend>
    <div>
      <input type="radio" id="GoThingC" name="ThingC" value="Go">
      <label for="GoThingC">Go</label>
    </div>
    <div>
      <input type="radio" id="NoGoThingC" name="ThingC" value="NoGo">
      <label for="NoGoThingC">No-Go</label>
    </div>
  </fieldset>
</div>