document.querySelectorAll选择特定输入的ID

Question

I have a table which has two separate checkbox inputs. When selecting the first input there is a cumulative amount which calculates. If you select the second checkbox, the function errors (because of the duplicate input).

function updateTotals() {
    var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
    $('#checkedTotal').val(sum);
};

What I need to do is separate the inputs, maybe using a class. I cant seem to get the syntax, or may be barking up the wrong tree. Something like...

function updateTotals() {
    var sum = Array.prototype.reduce.call(document.querySelectorAll ('.input').check:checked,(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
    $('#checkedTotal').val(sum);
};

I would add this as an jsfiddle example, but the table is in a Salesforce Visualforce Page, using apex fields.

Thanks in advance

Added HTML

<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">


    <input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">

    <table id="invoicesTable" style="width:100%;">
        <thead class="tableHeadBlue">
            <tr>
                <td>Select</td>
                <td>Date</td>
                <td>Type</td>
                <td>Order</td>
                <td>Amount</td>
                <td>id</td>
                <td>Select2</td>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
                        </label>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
                        <span style="color:red;">
                        </span>
                    </td>
                    <td>Invoice
                    </td>
                    <td>
                        <span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check" style="font-size:26px;"></td>
                </tr>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
                        </label>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
                        <span style="color:red;">
                        </span>
                    </td>
                    <td>Invoice
                    </td>
                    <td>
                        <span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check" style="font-size:26px;"></td>
                </tr>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
                        </label>
                    </td>
                    <td>
                        <span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
                        </span>
                    </td>
                    <td><span style="color:red;">Credit</span>
                    </td>
                    <td>
                        <span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check" style="font-size:26px;"></td>
                </tr>
        </tbody>
    </table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>

Answer 1

Add class first to first checkbox in <tr> and add class second to second checkbox in <tr> .

updateTotals only query checkbox which has class first to avoid second .

 function updateTotals() { var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check.first:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0); $('#checkedTotal').val(sum); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width:50%;"> <form id="j_id0:j_id2" name="j_id0:j_id2" method="post"> <input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2"> <input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number"> <table id="invoicesTable" style="width:100%;"> <thead class="tableHeadBlue"> <tr> <td>Select</td> <td>Date</td> <td>Type</td> <td>Order</td> <td>Amount</td> <td>id</td> <td>Select2</td> </tr> </thead> <tbody> <tr> <td> <label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00"> </label> </td> <td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span> <span style="color:red;"> </span> </td> <td>Invoice </td> <td> <span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span> </span> </td> <td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td> <td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td> <td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check second" style="font-size:26px;"></td> </tr> <tr> <td> <label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00"> </label> </td> <td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span> <span style="color:red;"> </span> </td> <td>Invoice </td> <td> <span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span> </span> </td> <td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td> <td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td> <td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check second" style="font-size:26px;"></td> </tr> <tr> <td> <label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00"> </label> </td> <td> <span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span> </span> </td> <td><span style="color:red;">Credit</span> </td> <td> <span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span> </span> </td> <td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td> <td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td> <td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check second" style="font-size:26px;"></td> </tr> </tbody> </table><div id="j_id0:j_id2:j_id24"></div> </form> </div>