Javascript 内联复选框ajax修改数字
我有这样一个html,例如:Javascript 内联复选框ajax修改数字,javascript,ajax,jquery,Javascript,Ajax,Jquery,我有这样一个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"
<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美元订阅
请选中此项以添加您自己的电子邮件
结构:
[复选框]订阅(50美元/月)
文不对题
[另一个复选框]优惠-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>
-
想要收到电子邮件(50美元/月)
一些文本
-
-30美元订阅
请选中此项以添加您自己的电子邮件
使用jQuery
$('#custom_test').change(function(){
if($(this).is(':checked')){
$("#price").text($('#price').text()*1 - 30);
}else{
$("#price").text($('#price').text()*1 + 30);
}
});
检查小提琴:
希望这对我有帮助。您确定它没有在浏览器中缓存吗?尝试强制重新加载(Shift+reload按钮)@Jimmy我已经更新了在Firefox中工作的代码(我相信您正在使用)。Firefox不支持innerText属性(只支持Firefox),所以我用innerHTML对其进行了更新(这更像是一种解决方法)。请您现在再试一次好吗?如果我的输入复选框中有
onclick=
,这仍然有效吗?您为什么需要它?内联javascript作为内联CSS是一种非常糟糕的做法。你应该把JS放在.JS中,把样式放在.css中。我不认为是这样,但是如果你一定要把inline onclick=放在HTML中,请记住它是在“onchange”之前启动的(在上面的javascript代码片段中)。正如你所知。不要在简单javascript做得很好的地方使用jQuery。@slevon:如果我的输入复选框中有onclick=
,这仍然有效吗?@Jimmy:我不知道你的确切意思。我提供的标记需要jQuery。如果使用jQuery,则无需使用onclick=”“arrtibute,而且这并不常见sense@spliter当前位置当吉米用jQuery标记他的问题时,我想他喜欢用jQuery。希望你同意,如果你使用jQuery,你应该坚持它,它的设计模式。不,@slevon,我完全不同意。您可以使用适合于每个特定任务的工具。如果有人想使用jQuery,这并不意味着你应该建议不良做法。很抱歉,用jQuery“构建在顶部”替换最简单的纯javascript方法被认为是一种不好的做法,而不是一种“设计模式”。