WordPress中checkbox选中时如何为对应label添加class？

方案1：PHP服务端初始渲染 #

页面首次加载时就根据存储的选中状态直接输出对应class，符合WordPress开发规范，适合不需要前端动态切换的场景：

<?php
// 自定义选中状态下的class名称，可根据需求修改
$active_class = $transport === 'yes' ? 'is-active' : '';
?>
<label class="ADD_CLASS_HERE <?php echo esc_attr($active_class); ?>">
    <input type="checkbox" name="moto" id="moto" value="yes" <?php checked( 'yes', $transport); ?> />
</label>

提示：使用esc_attr()对输出的class做转义处理，符合WordPress安全开发要求。

方案2：JavaScript动态切换（前端交互场景） #

如果需要用户点击checkbox切换状态时实时更新label的class，使用原生JS实现即可，不需要依赖jQuery：

// 代码可放入主题footer.php的</body>标签前，或通过wp_enqueue_script引入独立JS文件
document.addEventListener('DOMContentLoaded', function () {
  const checkBox = document.getElementById('moto');
  const targetLabel = checkBox.closest('label');

  // 初始化同步状态
  updateLabelClass(checkBox, targetLabel);

  // 监听选中状态变化
  checkBox.addEventListener('change', function () {
    updateLabelClass(this, targetLabel);
  });

  function updateLabelClass(checkbox, label) {
    // 将is-checked替换为你需要的class名称
    checkbox.checked ? label.classList.add('is-checked') : label.classList.remove('is-checked');
  }
});

方案3：纯CSS实现（仅需样式变化可选） #

如果只是需要实现选中后的样式差异，不需要实际给label添加class，直接用CSS选择器即可，代码更简洁：

/* 匹配包含选中checkbox的label标签，可自定义样式规则 */
label:has(input#moto:checked) {
  background: #e9f5ff;
  border: 1px solid #2271b1;
  color: #1d3557;
}

提示：:has()选择器兼容Chrome 105+、Firefox 121+、Safari 15.4+，需兼容老旧浏览器建议选择方案2。

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