单击radioButton时递增/递减jQuery

时间:2015-02-04 09:42:31

标签: javascript jquery

每个转发器元件上都有一对radiobutton,一次只能选择一个。两者都在页面加载时未选中。 页面上有两个值,例如:Financed和Non-Financed。 当点击融资的单选按钮时,如果在我需要将融资的div减1之前选择了非融资的单选按钮,我需要将融资的div的值增加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>

1 个答案:

答案 0 :(得分:0)

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

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;
    }
});