在选中的单选按钮和复选框按钮上触发动画

<input type="radio" name="option" id="option1">
<label for="option1">Option 1</label>

<input type="checkbox" id="option2">
<label for="option2">Option 2</label>

/* 未选中状态下的样式 */
input[type="radio"]:not(:checked) + label,
input[type="checkbox"]:not(:checked) + label {
  /* 添加未选中状态下的样式 */
}

/* 选中状态下的样式 */
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  /* 添加选中状态下的样式 */
}

/* 添加动画效果 */
input[type="radio"] + label,
input[type="checkbox"] + label {
  transition: all 0.3s ease;
}

// 监听单选按钮的状态变化
document.getElementById("option1").addEventListener("change", function() {
  if (this.checked) {
    // 添加选中状态下的动画类
  } else {
    // 移除选中状态下的动画类
  }
});

// 监听复选框按钮的状态变化
document.getElementById("option2").addEventListener("change", function() {
  if (this.checked) {
    // 添加选中状态下的动画类
  } else {
    // 移除选中状态下的动画类
  }
});