将单选按钮矩阵转换为数值或百分比

Question

我有三行单选按钮，每行属于一个组。用户 select 每行一个，基于 selection，该值应出现在最后一列（第一个单选按钮的值为 2，第二个为 1，第三个为 0，三行相同）因此最后所有行的总数。

我使用以下脚本来计算总数。我可以申请一行，但不能申请每一行，然后求总数。

当我尝试并计划重复三个时，我无法获得每一列。有人可以帮我吗？

$(":radio").on("change", function() {
  var total = 0;
  $(":radio:checked").each(function() {
    total += Number(this.value);
  });

  $("#total").text(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Vaules</td>
      <td>Good</td>
      <td>Better</td>
      <td>Poor</td>
      <td>Value selected</td>
    </tr>
    <tr>
      <td>Quality</td>
      <td>
        <input id="defaultInline1" class="custom-control-input" name="Radio1" type="radio" />
        <label class="custom-control-label" for="defaultInline1">&nbsp;</label>
      </td>
      <td>
        <label class="custom-control-label" for="defaultInline1">&nbsp;</label>
        <input id="defaultInline2" class="custom-control-input" name="Radio1" type="radio" />&nbsp;</td>
      <td>
        <label class="custom-control-label" for="defaultInline2">&nbsp;</label>
        <input id="defaultInline3" class="custom-control-input" name="Radio1" type="radio" />&nbsp;</td>
      <td>
        <input name="total" type="text" />
      </td>
    </tr>
    <tr>
      <td>Taste</td>
      <td>
        <input id="defaultInline1" class="custom-control-input" name="Radio2" type="radio" />
        <label class="custom-control-label" for="defaultInline1">&nbsp;</label>
      </td>
      <td>
        <label class="custom-control-label" for="defaultInline1">&nbsp;</label>
        <input id="defaultInline2" class="custom-control-input" name="Radio2" type="radio" />&nbsp;</td>
      <td>
        <label class="custom-control-label" for="defaultInline2">&nbsp;</label>
        <input id="defaultInline3" class="custom-control-input" name="Radio2" type="radio" />&nbsp;</td>
      <td>
        <input name="total2" type="text" />
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Quality</td>
      <td>
        <input id="defaultInline1" class="custom-control-input" name="Radio3" type="radio" />
        <label class="custom-control-label" for="defaultInline1">&nbsp;</label>
      </td>
      <td>
        <label class="custom-control-label" for="defaultInline1">&nbsp;</label>
        <input id="defaultInline2" class="custom-control-input" name="Radio3" type="radio" />
        <label class="custom-control-label" for="defaultInline2">&nbsp;</label>
      </td>
      <td>
        <label class="custom-control-label" for="defaultInline2">&nbsp;</label>
        <input id="defaultInline3" class="custom-control-input" name="Radio3" type="radio" />
      </td>
      <td>
        <input name="total3" type="text" />
      </td>/td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Total</td>
      <td>
        <input name="ftotal" type="text" />
      </td>
    </tr>
  </tbody>
</table>

完整代码如下：https://jsfiddle.net/doctsh123/rLcnomst/6/

Answer 1

您的 HTML 和 JS 中存在几个问题：

您有很多重复的 id 属性。如果要对元素进行分组，请改用 class 属性。不过，在这种情况下，您不需要它们，因此可以将它们移除。
您有一些损坏的 /td> 标签需要删除
无线电输入没有 value 属性可供读取，因此需要添加这些
空 label 元素是多余的，可以删除
要设置输入值，请使用 val() 而不是 text()
要设置行中的值，请使用 closest() 获取 tr 然后 find() 从那里输入。所有输入上的通用 class 将使这更容易。

所有问题都解决了，试试这个：

$(":radio").on("change", function() {
  var total = 0;
  $(":radio:checked").each(function() {
    total += Number(this.value);
  });
  $("#total").val(total);
  
 $(this).closest('tr').find('.rowtotal').val(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Vaules</td>
      <td>Good</td>
      <td>Better</td>
      <td>Poor</td>
      <td>Value selected</td>
    </tr>
    <tr>
      <td>Quality</td>
      <td><input class="custom-control-input" name="Radio1" type="radio" value="2" /></td>
      <td><input class="custom-control-input" name="Radio1" type="radio" value="1" /></td>
      <td><input class="custom-control-input" name="Radio1" type="radio" value="0" /></td>
      <td><input name="total" type="text" class="rowtotal" /></td>
    </tr>
    <tr>
      <td>Taste</td>
      <td><input class="custom-control-input" name="Radio2" type="radio" value="2" /></td>
      <td><input class="custom-control-input" name="Radio2" type="radio" value="1" /></td>
      <td><input class="custom-control-input" name="Radio2" type="radio" value="0" /></td>
      <td><input name="total2" type="text" class="rowtotal" /></td>
    </tr>
    <tr>
      <td>Quality</td>
      <td><input class="custom-control-input" name="Radio3" type="radio" value="2" /></td>
      <td><input class="custom-control-input" name="Radio3" type="radio" value="1" /></td>
      <td><input class="custom-control-input" name="Radio3" type="radio" value="0" /></td>
     <td><input name="total3" type="text" class="rowtotal" /></td>
    </tr>
    <tr>
      <td colspan="3"></td>
      <td>Total</td>
      <td><input name="ftotal" type="text" id="total" /></td>
    </tr>
  </tbody>
</table>

将单选按钮矩阵转换为数值或百分比

Converting matrix of radio buttons to a numerical value or percentage

html

jquery

jscript