如何檢查是否在單擊時選中了復選框？

Question

當我根據復選框是否被選中而單擊復選框時，我需要觸發一些代碼。 但出於某種原因， .is(':checked')總是被觸發。

這是我的代碼。

  jQuery('#selectlist input[type=checkbox]').live('click',function(){
    var select_id = jQuery(this).attr('id');

    if(jQuery(this).is(':checked')) {
      alert('You have unchecked the checkbox');
      // Remove some data from variable
    } else {
      alert('You have checked the checkbox');
      //Add data to variable
    }
  }

更新
我在 JSFiddle 上添加了一個例子： http : //jsfiddle.net/HgQUS/

Answer 1

使用change而不是click

Answer 2

$(this).val();

要么

$(this).prop('checked'); # on jquery >= 1.6

你會更擅長搜索 SO：

• 在 jQuery 中獲取復選框值
• 如何在 jQuery 中檢索復選框值
• 測試是否使用 jQuery 選中復選框

Answer 3

this.checked

應該告訴您是否選中了復選框，盡管這只是 javascript，因此您將無法在“jquery”元素上調用它。 例如 -

<input type="checkbox" id="checky">
$("#checky")[0].checked

Answer 4

如果輸入有checked 屬性，那么它顯然是被選中的，如果它沒有被選中，則將其移除。

if ($(this).attr("checked")) {
    // return true
}
else {
    // return false
}

但是，您可以修改上述代碼以檢查該屬性是否未刪除，而是設置為 true/false，如下所示：

if ($(this).attr("checked") == "true") {
    // return true
}
else {
    // return false
}

此外，我看到您使用 jQuery 作為選擇器的運算符，您可以只使用美元、 $符號，因為這是一種快捷方式。

Answer 5

我翻轉了警報，它對我有用：

<script type="text/javascript">
  jQuery('#selectlist input[type=checkbox]').live('click',function(){
    var select_id = jQuery(this).attr('id');

    if(jQuery(this).is(':checked')) {
            alert('You have checked the checkbox');
      // Remove some data from variable
    } else {
            alert('You have unchecked the checkbox');
      //Add data to variable
    }
  });

</script>

Answer 6

如果您對unchecked時為什么說unchecked感到困惑。 您的代碼沒有任何問題，您可以在警報中切換unchecked和已checked ，如下所示：

$('#selectlist_categories input[type=checkbox]').on('change',function(){
     var cat_id = $(this).attr('id');
     let cat_idText = $("input[type=checkbox]:checked").val();
    
     if(jQuery(this).is(':checked')) {
       alert('You have checked the checkbox' + " " + `${cat_idText}`); 
     } else {
       alert('You have unchecked the checkbox'); 
     }
}); 

PS：我已經更新了腳本以在jQuery 3.5.1 中工作，原來的live()只適用於jQuery 1.7，因為它在1.9 中被刪除以代替使用on()而在jQuery 3.5.1 上你可以使用$而不是jQuery和val()函數適用於所有版本，因為它是在jQuery 1.0 中添加的

或者以更好的方式更正 if 語句，如RickyCheers所說的添加! 在jQuery或$之前，然后 if 語句將把它變成一個if jQuery Element is not checked

$('#selectlist_categories input[type=checkbox]').on('click',function(){
     var cat_id = $(this).attr('id');
    
     if(!jQuery(this).is(':checked')) {
       alert('You have unchecked the checkbox');
     } else {
       alert('You have checked the checkbox');
     }
});

Answer 7

您的“if”語法不正確。

jQuery('#selectlist_categories input[type=checkbox]').live('click',function(){
    var cat_id = jQuery(this).attr('id');

    // if the checkbox is not checked then alert "You have unchecked the checkbox"
    if(!jQuery(this).is(':checked')) {
      alert('You have unchecked the checkbox');
    } else {
      //else alert "You have checked the checkbox"
      alert('You have checked the checkbox');
    }
  });