Where do I implement the getElementById in my JavaScript function?

Question

Background: For my website I have to count the number of checked checkboxes in a table. Depending on the result, there is then a different 'output'. As long as fewer than or equal to 2 checkboxes are checked --> output A. If more than 2 boxes are checked OR the first checkbox is checked --> output B.

Now to my problem: I specifically don't understand this line of code:

const checked = [...this.querySelectorAll(".choice:checked")].map(inp => +inp.value);

If I understand correctly, it checks all input fields in the form, adds and converts the results. But how can I implement an ID here that I only give to the first checkbox in order to solve the problem?

And another question: Can I then link the values ​​with a logical operator?

My code:

.hide {
  display: none;
}

<form id="listForm">
<table>
            <tbody>
                <tr id="G">
                    <td><b>G</b></td>
                    <td></td>
                    <td><input type="checkbox" class="choice" id="cbg" name="choiceG" value="1"></td>
                </tr>
                <tr>
                    <td id="A"><b>A</b></td>
                    <td></td>
                    <td><input type="checkbox" class="choice" name="choiceA" value="1"></td>
                </tr>
                <tr>
                    <td id="B"><b>B</b></td>
                    <td></td>
                    <td><input type="checkbox" class="choice" name="choiceB" value="1"></td>
                </tr>
                <tr>
                    <td id="C"><b>C</b></td>
                    <td></td>
                    <td><input type="checkbox" class="choice" name="choiceC" value="1"></td>
                </tr>
                <tr>
                    <td colspan="2" ;="" style="text-align:right;"><b>Sum:</b></td>
                    <td><input disabled="" type="text" size="2" name="total" id="total" value="0"></td>
                </tr>
            </tbody>
        </table>
</form>
    
    <div id="showwhen2" class="hide">
        <p>2 or less boxes checked; first box is unchecked</p>
    </div>
    <div id="showwhen3" class="hide">
        <p>first box or more than two boxes are checked</p>
    </div>

<script>
    document.getElementById("listForm").addEventListener("input", function() {
    
    let sum = 0;
    let sumg = 0;
    
    const checked = [...this.querySelectorAll(".choice:checked")].map(inp => +inp.value);
    const checkedg = [...this.querySelectorAll(".choice:checked")].map(inp => +inp.value);

    if (checked.length > 0) sum = checked.reduce((a, b) => a + b);
    if (checkedg.length > 0) sumg = checkedg.reduce((a, b) => a + b);

    console.log(sum);
                    console.log(sumg);

    document.getElementById("total").value = sumg + sum;
    document.getElementById("showwhen3").classList.toggle("hide", sum < 3 || sumg <1);
    document.getElementById("showwhen2").classList.toggle("hide", sum > 2);     
    });
</script>

Answer 1

This seems really overcomplicated.

const checkedCount = this.querySelectorAll(".choice:checked").length
if (checkedCount > 2 || this.querySelector('input#cbg').checked) {
  //output B
} else {
  //output A
}

querySelectorAll returns a list of all elements that match the selector (i. e. all checked inputs) and querySelector just one element. # is selector syntax for element ids.