获得表格单元格的值取决于单击哪些单选按钮

Question

我有一些单选按钮，在行的前5个单元格中有10个，我想影响行中第6个单元格的值，例如，如果单选按钮'6,7,5,8 ，对于每个单元格点击7'，它将显示值33，这是所有5个数字的总和，在“整体”单元格中，这是我的代码到目前为止： 顺便说一句，你必须在整页中看到片段的结果，否则它看起来不正确。

	// 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>

Answer 1

如果您只想在广播组中选择一个值，则每个组都需要具有相同的名称More Info

我已将jQuery用于此标记，因为您已对其进行了标记。

不需要<form>元素，但我将它们保留到位，以防您需要它们用于其他目的

我通过将class="item"添加到每个<tr>来修改此项以支持多行 我假设您计划从数据库或某个自动循环填充此信息，data-id属性也可用于捕获每行的唯一信息，如果您需要在以后唯一地定位它们

$(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>