javascript - 内联复选框ajax修改数字

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>

结构:

[复选框]订阅(50 美元/月) 文字布拉布拉

[另一个复选框]添加自己的电子邮件提供 -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