document.querySelectorAll select 特定输入的 id

Question

我有一个 table，它有两个独立的复选框输入。当 selecting 第一个输入时，会计算一个累积量。如果你 select 第二个复选框，函数错误（因为重复输入）。

函数

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

我需要做的是分离输入，也许使用 class。我似乎无法理解语法，或者可能找错了树。像...

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

我会将其添加为 jsfiddle 示例，但 table 在 Salesforce Visualforce 页面中，使用顶点字段。

提前致谢

更新

已添加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">8.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">0.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">0.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

将 class first 添加到 <tr> 中的第一个复选框并将 class second 添加到 <tr> 中的第二个复选框。

updateTotals 仅查询具有 class first 的复选框以避免 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">8.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">0.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">0.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>

document.querySelectorAll select 特定输入的 id

document.querySelectorAll select id of specific input

javascript

salesforce

selectors-api