请教两段jQuery复选框取值语句的差异

嘿，这两段代码乍一看都是获取复选框的值，但实际逻辑、边界行为甚至性能上都有不小差异，我给你拆解明白：

1. 执行逻辑的本质区别 #

• 第一段代码：if($('.activity-type-check').is(':checked')) type = $('.activity-type-check').val();
  这是先判断「是否存在选中项」，再赋值的逻辑：

  • 第一步：先通过$('.activity-type-check')选中所有class为activity-type-check的复选框，再用.is(':checked')检查这个集合里是否至少有一个元素被选中。
  • 第二步：只有当判断结果为true时，才会执行赋值操作——但这里的赋值是重新查询所有匹配的复选框，取第一个元素的值（不管它是不是被选中的那个）。
  • 坑点：如果有多个复选框，第一个未选中但后面的选中了，这段代码会把未选中的第一个复选框的值赋给type，完全不符合预期。

• 第二段代码：type = $('.activity-type-check:checked').val();
  这是直接筛选选中项再取值的逻辑：

  • 第一步：用:checked伪类直接精准筛选出class为activity-type-check且被选中的元素。
  • 第二步：直接取这个筛选后集合的val()——如果有多个选中项，依然返回第一个选中元素的值；如果没有选中项，会返回undefined。
  • 这里没有条件判断，不管有没有选中项都会执行赋值。

2. 边界场景的行为差异 #

举几个实际场景对比更清楚：

• 场景1：没有任何复选框被选中
  • 第一段：if判断为false，type会保留原来的值（如果之前没定义就是undefined）。
  • 第二段：直接把undefined赋值给type，会覆盖type原来的内容。
• 场景2：多个复选框，第一个未选中但后续有选中
  • 第一段：is(':checked')返回true（因为集合里有选中项），但赋值时取的是第一个未选中复选框的值，完全错误。
  • 第二段：只会选中被勾选的复选框，取第一个选中项的值，符合需求。
• 场景3：仅一个复选框且被选中
  • 两段代码行为一致，都能正确拿到这个复选框的值。

3. 性能层面的差异 #

• 第一段代码执行了两次DOM查询（两次调用$('.activity-type-check')），虽然在大部分场景下性能影响可以忽略，但属于没必要的重复操作。可以优化成先缓存DOM元素：

  const $checkboxes = $('.activity-type-check');
  if ($checkboxes.is(':checked')) {
    type = $checkboxes.val();
  }
  

• 第二段代码只做了一次DOM查询，直接筛选选中元素，更高效简洁。

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