CODEWITHSUNDEEP
jquery
bok
bok

Reputation: 17

unchecked checkbox still returns true on checkbox.is(":checked")

I have two checkboxes, 'pickup', and 'delivery'. Only one of them can be checked, so when one is checked and I check the other, the first one will be unchecked.

When I check A, and then immediately check B, A unchecks as expected. However when I console log if it is checked or not using .is(":checked"), both return true (this happens only when checking one if the other is already selected).

What am I doing wrong ?

here is the same code in codepen: https://codepen.io/BoLeynen/pen/RwKNwQY?editors=1010

let deliveryCheckbox = $("#checkbox-delivery")
let pickupCheckbox = $("#checkbox-pickup")

deliveryCheckbox.on('change', function(e){
  check(e);
});
pickupCheckbox.on('change', function(e){
  check(e);
});


function check(e){
  var clickedCheckbox = e.target.id;
  let pickupCheckboxValue = pickupCheckbox.is(':checked');
  let deliveryCheckboxValue = deliveryCheckbox.is(':checked');
  
  if(clickedCheckbox ==='checkbox-pickup'){
    deliveryCheckbox.prop('checked', false);
    console.log( 'delivery checked: ', deliveryCheckboxValue, '   pickup checked: ', pickupCheckboxValue)


  }else if(clickedCheckbox === 'checkbox-delivery'){
    pickupCheckbox.prop('checked', false);
    console.log( 'delivery checked: ', deliveryCheckboxValue, '   pickup checked: ', pickupCheckboxValue)

  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="">
  
  <input type="checkbox" name="delivery" value="delivery" id="checkbox-delivery">
  <label for="delivery">Delivery</label>
  </br>
  <input type="checkbox" name="pickup" value="pickup" id="checkbox-pickup">
  <label for="pickup">Pickup</label>
</form>

Upvotes: 0

Views: 36

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075537

It's because you're using the flag from before you unchecked the checkbox. You're doing:

let pickupCheckboxValue = pickupCheckbox.is(':checked');
let deliveryCheckboxValue = deliveryCheckbox.is(':checked');

then later you're doing

pickupCheckbox.prop('checked', false);

or similar for the other one. That doesn't have any effect on the boolean value you already have stored in pickupCheckboxValue and deliveryCheckboxValue.

If you want to know the state after the change, get the state after the change:

let deliveryCheckbox = $("#checkbox-delivery")
let pickupCheckbox = $("#checkbox-pickup")

deliveryCheckbox.on("change", function(e){
    check(e);
});
pickupCheckbox.on("change", function(e){
    check(e);
});

function check(e){
    var clickedCheckbox = e.target.id;
    
    if (clickedCheckbox ==="checkbox-pickup") {
        deliveryCheckbox.prop("checked", false);
    } else if (clickedCheckbox === "checkbox-delivery") {
        pickupCheckbox.prop("checked", false);
    }
    let pickupCheckboxValue = pickupCheckbox.is(":checked");
    let deliveryCheckboxValue = deliveryCheckbox.is(":checked");
    console.log( "delivery checked: ", deliveryCheckboxValue, "   pickup checked: ", pickupCheckboxValue)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="">
  
  <input type="checkbox" name="delivery" value="delivery" id="checkbox-delivery">
  <label for="delivery">Delivery</label>
  </br>
  <input type="checkbox" name="pickup" value="pickup" id="checkbox-pickup">
  <label for="pickup">Pickup</label>
</form>

But, we have radio buttons for exactly this situation: Mutually-exclusive choices:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="">
  
  <input type="radio" name="delivery-option" value="delivery" id="checkbox-delivery">
  <label for="delivery">Delivery</label>
  </br>
  <input type="radio" name="delivery-option" value="pickup" id="checkbox-pickup">
  <label for="pickup">Pickup</label>
</form>

Also note that your for values don't match your id values. You could use containment rather than for and id:

<form action="">
    <label>
        <input type="radio" name="delivery-option" value="delivery">
        Delivery
    </label>
    </br>
    <label>
        <input type="radio" name="delivery-option" value="pickup">
        Pickup
    </label>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions