如何在JavaScript的if-else语句中检查parentNode的classList？

你遇到的问题很典型——把jQuery对象和原生DOM元素的API搞混了！

咱们来拆解一下：

• $(this.parentNode).css("border", "3px solid red")能正常运行，是因为.css()是jQuery对象的内置方法；
• 但$(this.parentNode).classList返回undefined，是因为classList是原生DOM元素的属性，而$(xxx)返回的是jQuery包装后的对象，根本没有这个属性。

接下来给你两种解决方案，推荐第一种（贴合你已经在用的jQuery生态）：

方案1：用jQuery自带的类操作方法（推荐） #

jQuery已经封装了一套更易用的类操作方法：.hasClass()、.addClass()、.removeClass()，完全不需要用到原生的classList。

结合你的需求（复选框勾选时给上级容器加类，取消勾选时移除），代码可以简化成这样：

// 绑定复选框点击事件
$('.your-checkbox-selector').on('click', function() {
  // 获取当前复选框的上级容器（用jQuery的.parent()和你用this.parentNode效果一致）
  const $parentContainer = $(this).parent();
  // 根据复选框的勾选状态操作类名
  if ($(this).is(':checked')) {
    $parentContainer.addClass('chkbox-checked');
  } else {
    $parentContainer.removeClass('chkbox-checked');
  }
});

如果想更简洁，还可以用三元表达式一行搞定：

$(this).parent().toggleClass('chkbox-checked', $(this).is(':checked'));

.toggleClass()的第二个参数可以指定是否添加/移除类，完美匹配你的需求！

方案2：转成原生DOM元素使用classList #

如果你非要用原生的classList，只需要把jQuery对象转成原生DOM元素就行——通过[0]或者.get(0)获取jQuery集合里的第一个元素：

$('.your-checkbox-selector').on('click', function() {
  // 直接获取原生DOM的上级容器，或者从jQuery对象转
  const parentContainer = this.parentNode; // 或者 $(this.parentNode)[0]
  if (this.checked) {
    parentContainer.classList.add('chkbox-checked');
  } else {
    parentContainer.classList.remove('chkbox-checked');
  }
});

对你原代码的小提醒 #

你原代码里的$(this.parentNode.parentNode).find('.form-type-checkbox').classList存在两个问题：

1. find()返回的是jQuery对象，同样没有classList属性；
2. 逻辑上是在找父级容器下的所有复选框，这可能不是你要的——你应该针对当前点击的这个复选框对应的上级容器操作，而不是批量操作所有同类型容器。

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