JavaScript复选框表-如何添加值并找到最高值？

我是新来的，试图通过学习和练习来自学JavaScript。但我现在被卡住了

我工作中有个小项目。在web浏览器上脱机工作的矩阵计算器

有一个矩阵（15列10行），每个单元格都有赋值

在每行的末尾，必须显示所选复选框值的总和

然后，必须从前5行中找到最高的总和值，并将其添加到下5行的总和中

总金额必须显示在下面

某些单元格还指定了注释（有4个不同的注释），如果选中了此复选框，则必须在下面显示注释。（html中由ID分配的不同注释）

我需要的是HTML代码

<div>
<ul>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A1" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A2" value="1" id="noteA"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A3" value="1" id="noteB"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A4" value="1" id="noteC"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A5" value="1" id="noteD"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A15" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><p id="sumSelectedA"></p></li>
</ul>
<ul>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B1" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B2" value="1" id="noteA"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B3" value="1" id="noteB"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B4" value="1" id="noteC"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B5" value="1" id="noteD"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B15" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><p id="sumSelectedB"></p></li>
</ul>
<ul>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C1" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C2" value="1" id="noteA"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C3" value="1" id="noteB"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C4" value="1" id="noteC"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C5" value="1" id="noteD"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C15" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><p id="sumSelectedC"></p></li>
</ul>
<ul>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X1" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X2" value="1" id="noteA"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X3" value="1" id="noteB"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X4" value="1" id="noteC"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X5" value="1" id="noteD"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X15" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><p id="sumSelectedX"></p></li>
</ul>
<ul>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z1" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z2" value="1" id="noteA"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z3" value="1" id="noteB"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z4" value="1" id="noteC"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z5" value="1" id="noteD"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z15" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><p id="sumSelectedZ"></p></li>
</ul>
<ul>
    <p id="totalSum"></p><!-- Sum of HigheSt number from sumSelectedA to sumSelectedC and all other sumSelected -->
</ul>
<ul>
    <p id="noteInfo"></p><!-- Display all Notes if checkbox with id="NoteA and/or B and/or C and/or D" selected-->
</ul>

我的想法是用10函数来计算每一行， 然后下一个函数从前五行中查找最大值， 然后将最高值添加到所有其他行和值中。 这可能是非常简单和大量的代码，但对我来说是可以的（将离线工作，并将有一些实践）。如果有更简短的内容，如果您能在评论中发表，我将不胜感激

但对我来说真正的问题是显示笔记。 如何显示多个注释，应将注释文本放在何处，以及如何防止显示多个同一注释（假设选中了两个id为“NoteA”的复选框）

你不必给我现成的解决方案，一些指导也会奏效。或者可能有一种完全不同的方法来处理这个小项目

干杯

---

你已经说过什么用了：

我假设您已经在第页中包含了jQuery api：

---

//为了简化jquery，您必须更改此选项
var obj=$（‘输入’）；
每个（对象，函数（i，val）{
var target=i.attr（“数据目标”）；
var qtd=i.val（）；
var amount=$（target.text（）；
var total=parseInt（amount）+qtd；
html（总计）；
警报（“在“+目标+”中的summary为“+总计”）；
});

然后，您可以创建一个val来对所有值求和，并选择最高值

<script type="text/javascript">

var highest = 0;

// inside .each
if(qtd > highest){
    highest = qtd;
}

</script>

var最高=0；
//里面，每个
如果（qtd>最高）{
最高=qtd；
}

如何防止多次显示同一便笺

使用相同的名称创建一个组（例如“rad”）。在该组中，一次只能选择一个。提示：这可能运行缓慢，

<script type="text/javascript">

var highest = 0;

// inside .each
if(qtd > highest){
    highest = qtd;
}

</script>