JavaScript table of checkbox - how to add values and find highest?

Question

I am new here, trying to self learn JavaScript by studying and practicing. But I am stuck now.

I have small project at work. Matrix calculator working offline on web browser.

There is a matrix (15 column by 10 rows) with assigned values for each cell.

At the end of each row there must be displayed sum of selected check-boxes values.

Then from first 5 rows must be found highest sum value and be added to the sum of next 5 rows.

Total sum must be displayed below.

Some cells have also assigned Note (there is 4 different notes) and if any of this check-boxes is selected Note must be displayed below. (different notes assigned by ID in html)

What I have for is the HTML code

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

My idea was to use 10 function to calculate each row, then next function to find highest value from first five rows, and then add the highest to all other row sum values. It might be very simple and lot of code but for me it is OK (will work offline and will have some practice). If there is something shorter I will appreciate if you can post it in comments.

But real problem for me is to display Notes. How to display multiple notes, where should I put note text and how to prevent displaying multiple time same note (let say 2 Check-boxes with id="NoteA" were selected)

You don't have to give me ready to use solution some direction will work as well. Or maybe there is a totally different way of approach to this small project.

Cheers M

Answer 1

You already said what use:

http://api.jquery.com/jquery.each/

I assume that you has included jQuery api in page:

---

// THis you must change to make easy in jquery
<input type="checkbox" name="A15" value="1" id="none" data-target="#sumSelectedA">

<script type="text/javascript">

var obj = $('input');

jQuery.each( obj, function( i, val ) {
    var target = i.attr('data-target');
    var qtd = i.val();

    var ammount = $(target).text();
    var total = parseInt(ammount)+qtd;
    target.html(total);

    alert("Sumatory in "+target+" is: "+total);

});

</script>

Then you can create a val to sum all values, and to pick the highest.

<script type="text/javascript">

var highest = 0;

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

</script>