求助：jQuery DataTable复选框至少选中一个的JavaScript验证问题

I see the problem with your validation logic—let's break down what's going wrong and fix it step by step:

Key Issues in Your Current Code #

1. Incorrect Element Reference:
   The line var vcheckBox = document.getElementById("childticket") targets a <div> element, not a checkbox. Divs don't have a checked property, so this condition will never evaluate to true. This line is unnecessary for your goal of checking selected checkboxes in the DataTable.

2. Variable Scope Error:
   You declared the okay variable inside the loop over table rows. This resets okay to false for every row, meaning even if some rows have checked checkboxes, the last row without a selection will set okay back to false and trigger the error.

3. Redundant & Error-Prone Looping:
   Looping through each row and each checkbox individually is overcomplicating things, and it leads to multiple alert triggers if multiple rows are unchecked.

Corrected JavaScript Code #

Here's the simplified, working version of your validation logic:

$(function () {
    $('#btnSubmit').click(function (e) {
        // Get all checked checkboxes in the DataTable's tbody
        var checkedTickets = $('#childtable tbody').find(':checkbox:checked');
        
        if (checkedTickets.length === 0) {
            // No checkboxes selected—show error and prevent form submission
            alert("At least One Child Ticket Should Be Selected");
            e.preventDefault();
        } else {
            // At least one ticket is selected—allow submission (or add additional logic here)
            alert("Checkbox Selected");
        }
    });
});

What's Changed? #

• Removed the incorrect div reference: We no longer try to check a div's checked property, which was invalid.
• Simplified checkbox selection: Using $('#childtable tbody').find(':checkbox:checked') directly counts all selected checkboxes in the DataTable. If the length is 0, no tickets are selected.
• Fixed scope issues: We avoid looping through each row entirely, so we don't reset our validation flag unnecessarily.
• Efficient selector: Using $('#btnSubmit') directly (since your button has an explicit ID) is cleaner than the attribute ends-with selector.

Optional Improvement: Use the Error Span Instead of Alert #

Instead of using a browser alert, you can display the error message in the existing <span id="SelectTicket"> element for a better user experience:

$(function () {
    $('#btnSubmit').click(function (e) {
        var checkedTickets = $('#childtable tbody').find(':checkbox:checked');
        var errorSpan = $('#SelectTicket');
        
        if (checkedTickets.length === 0) {
            errorSpan.text("At least One Child Ticket Should Be Selected");
            e.preventDefault();
        } else {
            errorSpan.text(""); // Clear error message
            alert("Checkbox Selected");
        }
    });
});

This will show the error message in red right above the table, which is more intuitive for users.

内容的提问来源于stack exchange，提问作者Eric Aime Tchatchoua