[英]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美元/月)文本bla bla
[另一个复选框]提供-30 $添加自己的电子邮件)
所以基本上我有一个订阅的复选框,有一个订阅的价格,并且在我有另一个“优惠”复选框,如果你选中它应该编辑的复选框内联上面订阅的价格-30 $如果检查,如果不是保持不变。
我如何使用Ajax或某种JQuery / JS函数进行编辑,具体取决于具有第二个复选框id的跨度的ID?
提前致谢!
你知道你有非常糟糕的非语义标记,不是吗? 在做任何理智之前,你需要使它有效和语义。 但对于您目前的情况,这里是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;
}
});
在这里您可能想要更新标记:
<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>
使用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/
希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.