document.querySelectorAll выбрать идентификатор конкретного ввода - PullRequest
Новая
       7

document.querySelectorAll выбрать идентификатор конкретного ввода

0 голосов
/ 27 июня 2018

У меня есть таблица, в которой есть два отдельных флажка ввода. При выборе первого входа есть накопленная сумма, которая рассчитывается. Если вы установите второй флажок, ошибки функции (из-за дублированного ввода).

Функция 

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 с использованием полей Apex.

Заранее спасибо

UPDATE

Добавлен 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 голосов
/ 27 июня 2018

Добавьте класс 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>
...