Question

i got following problem, i need to build a two checkboxes; where only one can be selected at a time, but onchange there will be a live calculation.

$('#calculator input, #calculator select').change(function() {
    $('#calc_keller_true').click(function() {
        $('#calc_keller_false').removeAttr('checked');
    });
    $('#calc_keller_false').click(function() {
        $('#calc_keller_true').removeAttr('checked');
    });
    liveCalculate();
});

This is how it looks like, which is working but it seems to slow cause in my function liveCalculate i do this.

function liveCalculate() {
    // Getting the value of the checked checkbox
    var calc_keller = $('input[name=calc_keller]:checked').val();
    alert(calc_keller);
}

So when i click on the false button the alert will trigger before my removeAttr and both Checkboxes will be ‘checked’ at the moment of the alert.

Anyone got a plan why exactly the liveCalculate function triggers faster then the removeAttr ?

Do i miss some basic knowledge in how the order works in javascript ?

Best Regards,
jay7

Answer 1

You only need to add click-handlers once. In your above example, you are adding them again and again, for every ‘change’ event you have on the select box.

Furthermore, you are not actually removing the attr on the change event, that happens during the click events. However, you fire liveCalculate after the change event.

Consider the following:

$('#calc_keller_true').click(function() {
    $('#calc_keller_false').removeAttr('checked');
});
$('#calc_keller_false').click(function() {
    $('#calc_keller_true').removeAttr('checked');
});

$('#calculator input, #calculator select').change(function() {
    $('#calc_keller_false').removeAttr('checked');
    $('#calc_keller_true').removeAttr('checked');
    liveCalculate();
});

I’m not entirely sure if that accomplishes what you’re expecting (simply because it isn’t 100% clear to me what you do expect to happen).