单击单选按钮时递增/递减 jQuery

Increment/Decrement when a radioButton is clicked jQuery

本文关键字：递减 jQuery 单选按钮 单击      更新时间：2023-09-26

我在每个中继器元素上有一对单选按钮，一次只能选择一个。两者都在页面加载时未选中。页面上有两个值，例如：融资和非融资。单击融资单选按钮时，我需要将融资div 的值增加 1，如果在我需要将融资单选按钮也减少 1 之前选择了非融资单选按钮。

这是我现在只添加的代码：

var financedDiv = Number($('.financed div').html().trim());
    var NonfinancedDiv = Number($('.non-financed div').html().trim());
    var cbxFinancedInvioces = $('#cbxFinancedInvoices');
    var cbxUnfinancedInvoices = $('#cbxUnFinancedInvoices');
    cbxFinancedInvioces.on('change', function () {
        if (this.checked) {                
            financedDiv = financedDiv + 1;
            $('.financed div').html(financedDiv);
        }            
    });
    cbxUnfinancedInvoices.on('change', function () {
        if (this.checked) {               
            NonfinancedDiv = NonfinancedDiv + 1;
            $('.non-financed div').html(NonfinancedDiv);
        }
    });

这很好地增加了值，但我不确定如何查找该框是否在什么条件下被单击以减小值。

HTML 如下：

<div class="col-sm-12 dvContainer"><div class="row dashboard-nmbers text-center">
<div class="col-sm-6 ">
    <div class="financed">
        <div>0</div>
        <p>Financed</p>
    </div>
</div>
<div class="col-sm-6 ">
    <div class="non-financed">
        <div>0</div>
        <p>Non_Financed</p>
    </div>
</div>


<table class="table table-striped-table" id="invoice-data-table">
<tbody> 
<tr>
    <td>1401896</td>
    <td><input id="cbxFinancedInvoices" name="InvoiceStatus" type="radio"></td>
    <td><input id="cbxUnFinancedInvoices" name="InvoiceStatus" type="radio"></td>
    <td></td>
    <td>EUR</td>
    <td id="invoice-amount">415</td>
    <td>7/12/2014</td>
    <td></td>        
</tr>
</tbody>
</table>
</div>

检查该组中是否单击了任何单选按钮。将脚本更新为

var financedDiv = Number($('.financed div').html().trim());
var NonfinancedDiv = Number($('.non-financed div').html().trim());
var cbxFinancedInvioces = $('#cbxFinancedInvoices');
var cbxUnfinancedInvoices = $('#cbxUnFinancedInvoices');
var checkVal = $("input[name='InvoiceStatus']:checked").val();
cbxFinancedInvioces.on('change', function () {        
    if (this.checked) {                
        financedDiv = financedDiv + 1;
        $('.financed div').html(financedDiv);
        if(checkVal) {
            NonfinancedDiv = NonfinancedDiv - 1;
            $('.non-financed div').html(NonfinancedDiv);
        }
        checkVal = true;
    }            
});
cbxUnfinancedInvoices.on('change', function () {
    if (this.checked) {               
        NonfinancedDiv = NonfinancedDiv + 1;
        $('.non-financed div').html(NonfinancedDiv);
                    if(checkVal) {
            financedDiv = financedDiv - 1;
            $('.financed div').html(financedDiv);
        }
        checkVal = true;
    }
});
相关文章：