javascript - 根据单击的单选按钮获取表格单元格的值

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>