Getting Value of Table Cell to Depend on which Radio Buttons were Clicked

ChippeRockTheMurph

I have some radio buttons, 10 in the first 5 cells of the row, which I would like to affect the value of the 6th cell in the row, for example, if the radio buttons '6, 7, 5, 8, 7' were clicked for each of the cells it would show the value 33, which is the sum of all 5 of those numbers, in the 'Overall' cell, here is my code so far: BTW you have to see the results of the snippet in full page or it won't look correct.

	// Save's the things the user entered
	document.getElementById('things').addEventListener('blur', function ( evt ) {
		window.localStorage['things-to-be-picked'] = this.value
	})

	// use the user’s saved things
	document.addEventListener('DOMContentLoaded', function ( evt ) {
		var things = window.localStorage['things-to-be-picked']
		if ( things ) {
			document.getElementById('things').value = things
		}
	})

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 95%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}

<table align=center>
<thead>
  <tr>
    <th>Skating</th>
    <th>Shooting</th>
    <th>Passing</th>
    <th>Puck Control</th>
    <th>Team Play</th>
    <th>Overall</th>
  </tr>
</thead>
<tbody>
     <tr>
    <td>
    <form action="">
      <input type="radio"> 1
      <input type="radio"> 2
      <input type="radio"> 3
      <input type="radio"> 4
      <input type="radio"> 5<br>
      <input type="radio"> 6
      <input type="radio"> 7
      <input type="radio"> 8
      <input type="radio"> 9
      <input type="radio">10
    </form>
</td>
<td>
<form action="">
  <input type="radio"> 1
  <input type="radio"> 2
  <input type="radio"> 3
  <input type="radio"> 4
  <input type="radio"> 5<br>
  <input type="radio"> 6
  <input type="radio"> 7
  <input type="radio"> 8
  <input type="radio"> 9
  <input type="radio">10
</form>
</td>
<td>
<form action="">
  <input type="radio"> 1
  <input type="radio"> 2
  <input type="radio"> 3
  <input type="radio"> 4
  <input type="radio"> 5<br>
  <input type="radio"> 6
  <input type="radio"> 7
  <input type="radio"> 8
  <input type="radio"> 9
  <input type="radio">10
</form>
</td>
<td>
<form action="">
  <input type="radio"> 1
  <input type="radio"> 2
  <input type="radio"> 3
  <input type="radio"> 4
  <input type="radio"> 5<br>
  <input type="radio"> 6
  <input type="radio"> 7
  <input type="radio"> 8
  <input type="radio"> 9
  <input type="radio">10
</form>
</td>
<td>
<form action="">
  <input type="radio"> 1
  <input type="radio"> 2
  <input type="radio"> 3
  <input type="radio"> 4
  <input type="radio"> 5<br>
  <input type="radio"> 6
  <input type="radio"> 7
  <input type="radio"> 8
  <input type="radio"> 9
  <input type="radio">10
</form>
</td>
<td>
</td>
</tr>
</tr>
</tbody>
</table>

happymacarts

If you want only one value to be able to be selected on a radio group they all need to have the same name /per group More Info

I used jQuery for this since you had it tagged.

The <form> elements are not needed but i left them in place in case you need them for another purpose

I modified this to support multiple rows by adding the class="item" to each <tr> I assume you plan to populate this info from a db or some automated loop the data-id attribute could be used also to capture unique info for each row should you need to target them uniquely later

$(document).ready(function() {
  $(':radio').change(function() {
    var row = $(this).closest('.item'); 
    var checkedItems = row.find(":checked")
    if (checkedItems.length > 4) {
      row.find("td.overall").html(getOvarall(checkedItems));
    }
  })

  function getOvarall(_checkedItems) {
    var total = 0;
    _checkedItems.each(function() {
      total += parseFloat($(this).val());
    });
    return total;
  }


});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 95%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align=center>
  <thead>
    <tr>
      <th>Skating</th>
      <th>Shooting</th>
      <th>Passing</th>
      <th>Puck Control</th>
      <th>Team Play</th>
      <th>Overall</th>
    </tr>
  </thead>
  <tbody>
    <tr class="item" data-id="1">
      <td>
        <form action="">
          <input type="radio" name="skating" value="1">1
          <input type="radio" name="skating" value="2">2
          <input type="radio" name="skating" value="3">3
          <input type="radio" name="skating" value="4">4
          <input type="radio" name="skating" value="5">5
          <br>
          <input type="radio" name="skating" value="6">6
          <input type="radio" name="skating" value="7">7
          <input type="radio" name="skating" value="8">8
          <input type="radio" name="skating" value="9">9
          <input type="radio" name="skating" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="shooting" value="1">1
          <input type="radio" name="shooting" value="2">2
          <input type="radio" name="shooting" value="3">3
          <input type="radio" name="shooting" value="4">4
          <input type="radio" name="shooting" value="5">5
          <br>
          <input type="radio" name="shooting" value="6">6
          <input type="radio" name="shooting" value="7">7
          <input type="radio" name="shooting" value="8">8
          <input type="radio" name="shooting" value="9">9
          <input type="radio" name="shooting" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="passing" value="1">1
          <input type="radio" name="passing" value="2">2
          <input type="radio" name="passing" value="3">3
          <input type="radio" name="passing" value="4">4
          <input type="radio" name="passing" value="5">5
          <br>
          <input type="radio" name="passing" value="6">6
          <input type="radio" name="passing" value="7">7
          <input type="radio" name="passing" value="8">8
          <input type="radio" name="passing" value="9">9
          <input type="radio" name="passing" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="puck_control" value="1">1
          <input type="radio" name="puck_control" value="2">2
          <input type="radio" name="puck_control" value="3">3
          <input type="radio" name="puck_control" value="4">4
          <input type="radio" name="puck_control" value="5">5
          <br>
          <input type="radio" name="puck_control" value="6">6
          <input type="radio" name="puck_control" value="7">7
          <input type="radio" name="puck_control" value="8">8
          <input type="radio" name="puck_control" value="9">9
          <input type="radio" name="puck_control" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="team_play" value="1">1
          <input type="radio" name="team_play" value="2">2
          <input type="radio" name="team_play" value="3">3
          <input type="radio" name="team_play" value="4">4
          <input type="radio" name="team_play" value="5">5
          <br>
          <input type="radio" name="team_play" value="6">6
          <input type="radio" name="team_play" value="7">7
          <input type="radio" name="team_play" value="8">8
          <input type="radio" name="team_play" value="9">9
          <input type="radio" name="team_play" value="10">10
        </form>
      </td>
      <td class="overall">
      </td>

    </tr>
    <tr class="item" data-id="2">
      <td>
        <form action="">
          <input type="radio" name="skating" value="1">1
          <input type="radio" name="skating" value="2">2
          <input type="radio" name="skating" value="3">3
          <input type="radio" name="skating" value="4">4
          <input type="radio" name="skating" value="5">5
          <br>
          <input type="radio" name="skating" value="6">6
          <input type="radio" name="skating" value="7">7
          <input type="radio" name="skating" value="8">8
          <input type="radio" name="skating" value="9">9
          <input type="radio" name="skating" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="shooting" value="1">1
          <input type="radio" name="shooting" value="2">2
          <input type="radio" name="shooting" value="3">3
          <input type="radio" name="shooting" value="4">4
          <input type="radio" name="shooting" value="5">5
          <br>
          <input type="radio" name="shooting" value="6">6
          <input type="radio" name="shooting" value="7">7
          <input type="radio" name="shooting" value="8">8
          <input type="radio" name="shooting" value="9">9
          <input type="radio" name="shooting" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="passing" value="1">1
          <input type="radio" name="passing" value="2">2
          <input type="radio" name="passing" value="3">3
          <input type="radio" name="passing" value="4">4
          <input type="radio" name="passing" value="5">5
          <br>
          <input type="radio" name="passing" value="6">6
          <input type="radio" name="passing" value="7">7
          <input type="radio" name="passing" value="8">8
          <input type="radio" name="passing" value="9">9
          <input type="radio" name="passing" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="puck_control" value="1">1
          <input type="radio" name="puck_control" value="2">2
          <input type="radio" name="puck_control" value="3">3
          <input type="radio" name="puck_control" value="4">4
          <input type="radio" name="puck_control" value="5">5
          <br>
          <input type="radio" name="puck_control" value="6">6
          <input type="radio" name="puck_control" value="7">7
          <input type="radio" name="puck_control" value="8">8
          <input type="radio" name="puck_control" value="9">9
          <input type="radio" name="puck_control" value="10">10
        </form>
      </td>
      <td>
        <form action="">
          <input type="radio" name="team_play" value="1">1
          <input type="radio" name="team_play" value="2">2
          <input type="radio" name="team_play" value="3">3
          <input type="radio" name="team_play" value="4">4
          <input type="radio" name="team_play" value="5">5
          <br>
          <input type="radio" name="team_play" value="6">6
          <input type="radio" name="team_play" value="7">7
          <input type="radio" name="team_play" value="8">8
          <input type="radio" name="team_play" value="9">9
          <input type="radio" name="team_play" value="10">10
        </form>
      </td>
      <td class="overall">
      </td>

    </tr>
  </tbody>
</table>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-04-14

Comments

0 comments

Prev: Does RAM “degrade” over time?

TOP Ranking

Article

Getting Value of Table Cell to Depend on which Radio Buttons were Clicked

Getting Value of Table Cell to Depend on which Radio Buttons were Clicked

pump.io port in URL

grouping by column variables and appending a new variable based on condition

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

Group boxplot data while keeping their individual X axis labels in ggplot2 in R

Vector input in shiny R and then use it

BigQuery - concatenate ignoring NULL

Can a 32-bit antivirus program protect you from 64-bit threats

How to remove the extra space from right in a webview?

How to how increase/decrease compared to adjacent cell

android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference id DBhandler

Getting 502 Bad Gateway Error While Deploying WordPress On Dockerized Lemp?

Type 'number' is not assignable to type 'NgIterable<any>' when trying to async observe a datasource

Check if a number is a perfect square

FFmpeg resize without upscaling

How do I display Label text character-by-character?

How to show an image in a View with ASP.NET MVC 5? (Many suggestions failed so far)

Json Schema - Conditional Evaluation with RegEx

PlayOnLinux displays weird looking window on 18.04 for MS Office installation

JMeter: Why get error when try to save test plan

Emulator wrong screen resolution in Android Studio 1.3