内联复选框AJAX修改了一些

本文介绍了内联复选框AJAX修改了一些的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个HTML像这样的例子：

I have a html like this for example:

<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：

Stucture:

[复选框]订阅（$ 50 /月） 文字喇嘛喇嘛

[checkbox] subscribe (50$/month) text bla bla

[另一复选框]报价-30 $添加自己的电子邮件）

[another checkbox] offer -30$ to add own emails)

所以基本上我有一个复选框认购，用价格的认购，并根据该我还有一个复选框要约，如果你检查复选框应编辑内嵌的价格在上述认购有 - 30 $，如果检查，如果不保持不变。

So basically i have a check box to subscribe, with a price for that subscription, and under that i have another check box for "offer" if you check that check box it should edit inline the price in the above subscribe with -30$ if checked and and if not stay the same.

我怎么能做到这一点的，阿贾克斯或某种JQuery的/ JS功能在网上编辑根据跨度的与第二个复选框的ID的ID？

how can i do this with a Ajax or some kind of JQuery/JS function to edit in line depending on the ID of that span with id of the second checkbox ?

的jsfiddle

在此先感谢大家！

推荐答案

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

You do know that you have absolutely awful non-semantic markup, don't you? Before doing anything sane, you need to make it valid and semantic. But for your current situation, here is the jQuery snippet:

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

下面怎么可能要更新您的标记：

Here how you might want to update your markup:

<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