Question

Possible Duplicate:
inline check box ajax modify a number

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 in a POPUP?

JSfiddle

Please review also this solutions didn’t work:

slevon soltuion

spliter solution

Jquery version:1.6.2

Thanks in advance for all!

Answer 1

I would store the price in a data attribute. That way you can calculate the value to be displayed in the change handler of the checkbox:

$('#custom_test').change(function(){
    if($(this).is(':checked')){
        $('#price').text($('#price').data('price') - 30);
    }else{
        $('#price').text($('#price').data('price'));
    }
});

Here is a demonstration: http://jsfiddle.net/kkfJF/40/