document.querySelectorAll选择特定输入的ID

时间：2018-06-27 02:14:06

标签： javascript salesforce selectors-api

我有一个表，其中有两个单独的复选框输入。选择第一个输入时，会计算出一个累计量。如果选择第二个复选框，则功能会错误（由于输入重复）。

功能 

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

我需要做的是分开输入，也许使用一个类。我似乎无法获取语法，或者可能是吠错了树。像... 

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示例，但该表位于使用顶点字段的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">$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>

1 个答案:

答案 0 :(得分：1)

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

updateTotals仅查询具有类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">$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>

相关问题
最新问题