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

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.

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

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

1 个解决方案

#1

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.

因为你有标记，我使用了jQuery。

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

我通过向每个添加class =“item”来修改它以支持多行我假设您计划从db或某个自动循环填充此信息，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>