jquery - 未选中的复选框仍然在 checkbox.is(":checked") 上返回 true

Question

我有两个复选框，“pickup”和“delivery”。只能检查其中一个，所以当一个被选中而我检查另一个时，第一个将被取消选中。

当我检查 A，然后立即检查 B 时，A 按预期取消选中。但是，当我在控制台日志中检查或不使用.is(":checked")时，两者都返回 true（仅在检查一个是否已选中另一个时才会发生这种情况）。

我究竟做错了什么 ？

这是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>

标签： jquery

Answer 1

这是因为您使用的是取消选中复选框之前的标志。你正在做的：

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

然后你在做

pickupCheckbox.prop('checked', false);

或类似的另一个。pickupCheckboxValue这对您已经存储在and中的布尔值没有任何影响deliveryCheckboxValue。

如果想知道变更后的状态，获取变更后的状态：

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>

但是，对于这种情况，我们有单选按钮：互斥选择：

<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>

另请注意，您的for价值观与您的价值观不符id。您可以使用遏制而不是forand 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>