Question

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:

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

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

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.

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

Thanks in advance for all!

Answer 1

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