Question

我有一个这样的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函数进行编辑，具体取决于具有第二个复选框id的跨度的ID？

JSfiddle

提前感谢所有人！

Answer 1

你知道你有非常糟糕的非语义标记，不是吗？在做任何理智之前，你需要使它有效和语义。但是对于你目前的情况，这里是jQuery片段：

var price = document.getElementById('price'),
    origPrice = parseInt(price.innerHTML),
    reducedPrice = parseInt(price.innerHTML) - 30;

$('#custom_test').change(function(ev) {
    if (ev.target.checked) {
        price.innerHTML = reducedPrice;
    } else {
        price.innerHTML = origPrice;
    }
});

JSfiddle

此处您可能希望更新标记：

<ul>
<li>
    <label class="desc main">
        Want to get email ($<span id="price">50</span>/month)
        <input type="checkbox" checked="" id="subscribe" name="subscribe">
    </label>
    Some text
</li>
<li>
    <label class="desc offer">
        -$30 subscribe
        <input type="checkbox"  id="custom_test" name="custom_test">
    </label>
    Please check this to add your own email
</li>
</ul>

JSfiddle

Answer 2

使用jQuery就像

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

结帐小提琴： http://jsfiddle.net/kkfJF/29/

希望这有帮助

内联复选框ajax修改一个数字

2 个答案: