将jQuery动态切换required属性代码转为原生JS遇问题求助

先拆解你代码里的几个核心问题：

1. 元素获取时机不对 #

你在DOMContentLoaded事件外部就尝试获取rtk5_selection，这时候页面DOM可能还没完全渲染好，导致rtk5_selection大概率是null，后续的事件绑定自然会失效甚至报错。

2. 逻辑判断对象完全搞反了 #

原jQuery代码的逻辑是切换目标元素（.rtk5ReqField）的required状态，但你的原生JS代码错误地去判断复选框本身的required属性，这完全偏离了原本的业务逻辑。

3. 布尔属性的操作方式不够严谨 #

用getAttribute判断required这类布尔属性并不靠谱——布尔属性只要存在就会生效，不管它的值是""还是"required"。更推荐用hasAttribute或者直接操作DOM元素的required布尔属性。

修正后的代码（完全匹配原jQuery逻辑） #

下面的代码会1:1复刻原jQuery的功能：每次复选框触发change事件，就切换目标元素的required状态：

document.addEventListener('DOMContentLoaded', () => {
  // 必须在DOM加载完成后再获取元素
  const rtk5Selection = document.getElementById('rtk5');
  // 注意：原jQuery操作的是类名为rtk5ReqField的元素，你后来改成了id为rtk5Declaration的元素，这里统一用id版本
  const targetElement = document.getElementById('rtk5Declaration');

  // 先判断元素是否存在，避免控制台报错
  if (rtk5Selection && targetElement) {
    rtk5Selection.addEventListener('change', () => {
      // 切换目标元素的required状态
      if (targetElement.hasAttribute('required')) {
        targetElement.removeAttribute('required');
      } else {
        targetElement.setAttribute('required', 'required');
      }
    });
  }
});

更简洁的写法（利用布尔属性特性） #

因为required是DOM元素的原生布尔属性，我们可以直接修改它的布尔值，代码会更简洁直观：

document.addEventListener('DOMContentLoaded', () => {
  const rtk5Selection = document.getElementById('rtk5');
  const targetElement = document.getElementById('rtk5Declaration');

  if (rtk5Selection && targetElement) {
    rtk5Selection.addEventListener('change', () => {
      // 直接反转required的布尔值
      targetElement.required = !targetElement.required;
    });
  }
});

如果你实际需求是“复选框勾选时必填，取消勾选时不必填” #

如果原jQuery的逻辑其实是笔误，你真正想要的是根据复选框的勾选状态来控制目标元素的必填性（而非每次切换都反转状态），可以改成这个更符合常规表单场景的版本：

document.addEventListener('DOMContentLoaded', () => {
  const rtk5Selection = document.getElementById('rtk5');
  const targetElement = document.getElementById('rtk5Declaration');

  if (rtk5Selection && targetElement) {
    rtk5Selection.addEventListener('change', () => {
      // 复选框勾选时，目标元素必填；否则不必填
      targetElement.required = rtk5Selection.checked;
    });

    // 页面加载时初始化状态，避免初始显示和逻辑不一致
    targetElement.required = rtk5Selection.checked;
  }
});

你可以根据自己的实际业务需求选择对应的代码版本。

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