内联复选框ajax / jquery更改Popup中的数字

时间:2012-12-05 12:39:27

标签: javascript jquery ajax jquery-ui

  

可能重复:
  inline check box ajax modify a number

我有一个这样的html例如:

<li>
    <label class="desc">
        <font color="green">
            Want to get email ($<span id="price">50</span>/month)
        </font>
    </label>
    <input type="checkbox" checked="" id="subscribe" name="subscribe"> bla bla bla
</li>

<li>
    <label class="desc">-$30 subscribe</label>
    <input type="checkbox"  id="custom_test" name="custom_test">Please check this to add your own email
</li>

Stucture:

[复选框]订阅(50美元/月)text bla bla

[另一个复选框]提供-30 $来添加自己的电子邮件)

所以基本上我有一个订阅的复选框,以及该订阅的价格,并且根据我有另一个“优惠”复选框,如果您选中它应该编辑的复选框内联上面订阅的价格 - 30美元如果被检查,如果不是保持不变。

如何使用Ajax或某种JQuery / JS函数进行编辑,具体取决于具有 POPUP 中第二个复选框的id的跨度的ID?

JSfiddle

请查看此解决方案无效:

slevon soltuion

spliter solution

Jquery版本:1.6.2

提前感谢所有人!

2 个答案:

答案 0 :(得分:1)

我会将价格存储在data属性中。这样,您可以计算要在复选框的change处理程序中显示的值:

$('#custom_test').change(function(){
    if($(this).is(':checked')){
        $('#price').text($('#price').data('price') - 30);
    }else{
        $('#price').text($('#price').data('price'));
    }
});

以下是演示:http://jsfiddle.net/kkfJF/40/

答案 1 :(得分:0)

$(function(){
    $('#custom_test').change(function(){
        if($(this).is(':checked')) 
            $('span#price').html('20');
        else
            $('span#price').html('50');
    });
});