如果用户在javascript中选中或取消选中复选框，如何添加或删除值？

我有以下javascript代码，它基于复选框检查执行多个动态文本框的减法。当用户选中复选框时，这个函数可以正常工作，但是我想要的是，如果用户取消选中复选框，那么它应该减去未选中的复选框和，并且只显示选中的复选框和

下面是html代码

<div class="form-group col-md-6">
    <label for="inputfl4">Transection Number</label>
    <input type="text" class="form-control" id="trn_no" name="trn_no" placeholder="Transection Number">
    <span style="color: red"> 
</div>

<div class="form-group col-md-6">
    <label for="inputln4">Amount</label>
    <input type="text" class="form-control" id="txt1" name="txt1" value="">
</div>
    
<div class="form-group col-md-6">    
    <label for="inputln4">Date</label>
    <input type="text" id="autoclose-date" name="date_pay" class="datepicker-here form-control" placeholder="dd/mm/yyyy" aria-describedby="basic-addon3">
</div>
</div>
       

<table class="table table-striped table-bordered" id="edit-btn">
    <thead>
        <tr>
            <td colspan="6" style="text-align: right; border-right-style: hidden; color: red;"><b>Amount Remaining From Transaction Amount : </b></td>
            <td colspan="3" style="color: red; text-align: left;" id="amt_total"><b></b></td>
        </tr>
        <tr>
            <th>#</th>
            <th>Bill Number</th>
            <th>Vendor Name</th>
            <th>Bill To</th>
            <th>Payment Type</th>
            <th>Amount</th>
            <th>Amount Remaining</th>
            <th>Amount Paid</th>
            <th style="color: red;">Amount Payable</th>
        </tr>
    </thead>
    <tbody>
        @foreach($search as $bill)
<td align="center">
                                                <input type="checkbox" class="optional" name="myTextEditBox" data-id="amt_paid" onclick="totalIt()">
                                              </td>
                                              <td>{{$bill->bill_number}}</td>
                                              <td>{{$bill->vendor_name}}</td>
                                              <td>{{$bill->bill_to}}</td>
                                              <td id="amt" class="amt">{{$bill->amount}}</td>
                                              <td id="amt_rem" class="amt_rem">{{$bill->amount_payable}}</td>
             <td><input type="text" class="form-control" id="amt_paid" name="amt_paid"></td>
            <td><input type="text" class="form-control" id="amt_pay" name="amt_pay" style="color: red; border-color: red;" readonly></td>
            <tr></tr>  
            </tr>
        @endforeach
     </tbody>
  </table>
</div>
</form>
</div>

横断数
数量
日期
交易金额的剩余金额：
#
票据号码
厂商名称
帐单
支付类型
数量
剩余金额
已付金额
应付金额
@foreach（$search as$bill）
{{$bill->bill_number}
{{$bill->vendor_name}
{{$bill->bill_to}
{{$bill->amount}
{{$bill->应付金额}
@endforeach

函数totalIt（）{
var text=document.getElementsByName（“已支付金额”）；
var a=document.getElementById（“txt1”）.value；
var n=0；
对于（i=0；i

---

流程是-用户在txt1中输入金额，然后输入支付金额。用户在另一个输入框（或警报框）中获得两个字段的减法。现在，如果用户取消选中与“已支付金额”对应的复选框，则alertbox应仅显示复选框sum

每次复选框的状态发生变化时，您可以直接获取与复选框相邻的输入元素的值之和

for（document.querySelectorAll（'input[type=checkbox]）的常量复选框）{
checkbox.addEventListener（'change'，e=>{
console.log（'change'）
const sum=[…文档
.querySelectorAll（'输入[类型=复选框]：选中+输入[类型=文本]）]
.reduce（（acc，curr）=>acc++curr.value，0）；
document.getElementById（'output'）。textContent=sum；
});
}

请提供相关的HTML。@iota好的，我已经编辑了我的问题。您提供的HTML不是一个问题。代码中甚至没有任何复选框，我只是编辑使其正确缩进，但您有不匹配的标记（结束标记没有相应的开始标记）。这不能是一个工作的html代码。先生，代码已编辑！原始代码有正确的格式，但我在粘贴时把它搞砸了。我是新来的，所以不知道在stackovrflow上粘贴代码的正确格式！很抱歉给您带来不便！现在我添加了相应的复选框