Question

I’m trying to create an order form for training courses, which will include a discount for existing or former customers. It should be simple – simply tick the checkbox if you are a former student and the form will apply the discount.

The code I have written almost works, but there’s a glaring problem. The very first time you check the box, nothing happens. Then if you uncheck the box, it applies the discount. Check the box again and it removes the discount. This means that if you check the box once, nothing happens, but if you click on it again, you are receiving the discount despite indicating that you are not an existing/former customer.

The html is as follows:

<input type="checkbox" name="discounttick" value="Current or former student" id="discountbox" />

And the jquery:

var discount = 1;

function discountfunction(){
 if($("#discountbox").attr('checked')){
 discount = 0.9;
 }
 else {
 discount = 1;
 } 
 }

$("#discountbox").click(discountfunction);

Any help would be much appreciated.

Thanks!

Answer 1

attr method is not a good option for getting/setting properties of an element you can use prop instead:

if($("#discountbox").prop('checked')){

You can also use ternary operator and change event:

$('#discountbox').change(function(){
     discount = this.checked ? 0.9 : 1
})