使用jQuery获取复选框值遇问题：alert返回undefined求原因解析

嘿，作为过来人太懂这种新手期的困惑了！当初我刚摸jQuery的时候，也踩过attr()的坑，咱们来把这个问题掰碎了说清楚：

最常见的几个原因： #

• 选择器没命中目标复选框
  这是新手最容易犯的错！比如你写了$('#wrong-id')或者$('.misspelled-class')，导致jQuery选中的是空集合，调用attr('value')自然返回undefined。你可以先在控制台敲console.log($('你的选择器'))看看，要是输出的集合长度是0，那肯定是选择器写错了。

• 混淆了attr()和prop()的用途（jQuery 1.6+）
  从jQuery 1.6开始，attr()和prop()有明确分工：attr()是用来读取HTML标签上的初始属性值，而prop()读取的是DOM元素的当前动态属性值。如果你的复选框是动态生成的，或者value是后来用JS修改过的，用attr()就拿不到最新的值，会返回undefined或者旧值。

• 你其实想判断选中状态，却误用了attr('value')
  不少新手会把“获取复选框的值”和“判断是否选中”搞混。如果你的需求是知道复选框有没有被勾选，那attr('value')完全不对，得用is(':checked')或者prop('checked')。

正确的解决姿势： #

不管是静态还是动态的复选框，优先用val()方法获取值，这是jQuery专门为表单元素提供的方法，比attr()/prop()更省心：

// 获取复选框的value值
let checkboxVal = $('#your-checkbox-id').val();
alert(checkboxVal);

如果要判断选中状态：

// 方法1：用is(':checked')
let isChecked = $('#your-checkbox-id').is(':checked');
// 方法2：用prop('checked')
let isChecked2 = $('#your-checkbox-id').prop('checked');
alert(isChecked); // 会弹出true或false

先检查你的选择器是否正确，再换用val()试试，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者Don'tDownvoteMe