使用jQuery判断checkbox是否选中失效，已尝试4种方法均无效

失效原因 #

• 事件绑定时机错误
  如果JS代码在checkbox元素渲染完成前就执行，会导致$('#first')匹配不到元素，change事件绑定失败，所有判断逻辑都不会触发。
• attr()方法逻辑错误
  jQuery 1.6及以上版本中，attr()获取的是HTML标签的初始静态属性，不会随用户勾选操作更新，无法正确获取当前选中状态。
• 页面ID冲突
  如果存在多个id为first的元素，jQuery只会匹配第一个，会导致绑定或判断异常。

正确实现 #

将事件绑定逻辑放到DOM加载完成的回调中，同时将attr('checked')替换为prop('checked')即可：

// DOM加载完成后再执行绑定逻辑
$(function() {
  $('#first').change(function() {
    if ($(this).is(':checked')) {
      console.log('checked1');
      // 执行对应操作
    }

    if ($('#first:checked').length) {
      console.log('checked2');
      // 执行对应操作
    }

    if ($('#first').is(':checked')) {
      console.log('checked3');
      // 执行对应操作
    }

    // 替换attr为prop即可正常判断
    if ($('#first').prop('checked')) {
      console.log('checked4');
      // 执行对应操作
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="" id="first">

内容的提问来源于stack exchange，提问作者user17281121