jQuery实现DataTable复选框随机勾选功能失效如何修复

在HTML页面使用带复选框列的DataTable，需要实现以下逻辑：

• 点击按钮后先统计当前未勾选的复选框总数
• 读取name为quantity的文本框输入值，随机勾选对应数量的未勾选复选框

原有实现代码运行后点击id为btnRand的按钮，复选框没有被勾选，无法达到预期效果。

$(document).ready(function() {
    $('#btnRand').click(function(){
        var checkboxes = $("input.selectQuestion:checkbox").length;
        var must_check = 2; // 计划从name为quantity的输入框读取该值
        while ($("input.selectQuestion:checkbox:checked").length < must_check) {
            // 随机取复选框
            var random_checkbox = Math.floor(Math.random() * checkboxes) + 1;
            // 执行勾选
            $("input.selectQuestion:checkbox:nth-child("+random_checkbox+")").prop("checked", true);
        }
    })
});

• 选择器使用错误：:nth-child用于匹配同一父元素下指定位置的直接子元素，但DataTable中的复选框分散在不同行的单元格中，不属于同一父元素的直接子节点，该选择器根本无法选中目标复选框，自然无法修改勾选状态。
• 存在死循环风险：代码没有做边界校验，如果需要勾选的数量大于当前未勾选的复选框总数，while循环会永远无法满足退出条件，直接导致页面卡死。
• 参数读取缺失：must_check值写死为2，没有实际读取name为quantity的输入框的值。
• 随机逻辑低效：随机取值没有跳过已勾选的复选框，重复命中已勾选项时会空转循环，性能差。

$(document).ready(function() {
    // 替换为自己的DataTable初始化实例，已初始化可直接获取
    const dataTable = $('#yourTableId').DataTable();
    $('#btnRand').click(function(){
        // 1. 读取输入的勾选数量，做合法性校验
        const mustCheck = parseInt($('input[name="quantity"]').val().trim(), 10);
        if (isNaN(mustCheck) || mustCheck < 1) {
            alert('请输入大于0的合法数字作为勾选数量');
            return;
        }

        // 2. 获取所有未勾选的复选框，开分页时通过DataTable API获取全量节点，避免漏选分页隐藏项
        const uncheckBoxes = dataTable ? 
            dataTable.$('input.selectQuestion:checkbox:not(:checked)').toArray() :
            $("input.selectQuestion:checkbox:not(:checked)").toArray();
        const uncheckTotal = uncheckBoxes.length;
        if (uncheckTotal === 0) {
            alert('当前没有可勾选的复选框');
            return;
        }
        // 实际勾选数量取输入值和剩余未勾选数的最小值，避免死循环
        const realCheckCount = Math.min(mustCheck, uncheckTotal);

        // 3. Fisher-Yates洗牌算法打乱未勾选复选框顺序，取前N个执行勾选
        for (let i = uncheckBoxes.length - 1; i > 0; i--) {
            const randomIdx = Math.floor(Math.random() * (i + 1));
            [uncheckBoxes[i], uncheckBoxes[randomIdx]] = [uncheckBoxes[randomIdx], uncheckBoxes[i]];
        }
        uncheckBoxes.slice(0, realCheckCount).forEach(box => {
            box.checked = true;
            // 如果页面有监听复选框change事件，放开下一行注释触发事件
            // $(box).trigger('change');
        });
    })
});

• 替换了错误的:nth-child选择器，直接获取未勾选的复选框DOM集合操作，不会出现选不中元素的问题。
• 适配DataTable分页场景，通过DataTable实例API获取全量复选框，不会漏选其他分页的隐藏选项。
• 增加数值校验和边界判断，实际勾选数量不会超过剩余未勾选总数，从根源避免死循环。
• 用洗牌算法随机选取目标复选框，不会重复选中已勾选项，循环执行效率更高。

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