动态创建的JavaScript复选框required属性失效，求排查解决

问题根源 #

你当前的代码里把required属性加在了<div id="bodyWrapper_1">上，但**required属性仅对表单控件（如<input>、<select>等）生效**，<div>不是表单控件，所以这个设置完全无效。另外，HTML5原生没有给复选框组提供“至少选中一个”的校验规则，必须手动实现。

解决方案一：监听表单提交事件（最直观） #

通过拦截表单的submit事件，手动检查复选框选中状态，未选中则阻止提交并给出提示。

修改后的HTML（添加novalidate禁用默认校验）

<form novalidate>
    <!-- 原有复选框及结构保持不变 -->
    <input type="submit"/>
</form>

原生JavaScript代码

const form = document.querySelector('form');
// 选中同一组的所有复选框（通过name属性筛选）
const checkboxGroup = document.querySelectorAll('input[type="checkbox"][name="bodyWrapper_1"]');

form.addEventListener('submit', function(e) {
    // 判断是否有至少一个复选框被选中
    const hasCheckedOption = Array.from(checkboxGroup).some(cb => cb.checked);

    if (!hasCheckedOption) {
        e.preventDefault(); // 阻止表单提交
        // 显示自定义错误提示（可根据需求调整样式）
        const wrapper = document.getElementById('bodyWrapper_1');
        // 移除已存在的提示，避免重复
        let existingTip = wrapper.querySelector('.check-error');
        if (existingTip) existingTip.remove();
        
        const errorTip = document.createElement('div');
        errorTip.className = 'check-error text-danger small mt-1';
        errorTip.textContent = '请至少选择一个选项';
        wrapper.appendChild(errorTip);
    } else {
        // 提交前清除可能存在的错误提示
        const errorTip = document.querySelector('.check-error');
        if (errorTip) errorTip.remove();
    }
});

解决方案二：结合HTML5原生校验API #

利用setCustomValidity自定义校验规则，让浏览器原生的校验提示生效：

const form = document.querySelector('form');
const checkboxGroup = document.querySelectorAll('input[type="checkbox"][name="bodyWrapper_1"]');

// 给第一个复选框添加required（仅作为校验触发点）
checkboxGroup[0].setAttribute('required', '');

// 监听复选框的change事件，实时触发校验
checkboxGroup.forEach(cb => {
    cb.addEventListener('change', () => {
        form.reportValidity();
        // 重置错误信息
        checkboxGroup[0].setCustomValidity('');
    });
});

// 监听表单的invalid事件，自定义校验逻辑
form.addEventListener('invalid', function(e) {
    e.preventDefault();
    const hasChecked = Array.from(checkboxGroup).some(cb => cb.checked);
    if (!hasChecked) {
        checkboxGroup[0].setCustomValidity('请至少选择一个选项');
        form.reportValidity();
    }
}, true);

注意事项 #

• 如果是动态生成的复选框，要确保在元素创建完成后再执行上述JS代码，或者使用事件委托（比如监听父元素bodyWrapper_1的change事件）
• 若页面存在多组复选框，需通过name属性区分不同组，分别进行校验

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