Checkbox Validation with jQuery

Require the terms checkbox before continuing. The client-side check improves usability; repeat the requirement on the server after form submission.

HTML Top ↑

<input type="checkbox" id="terms">
<label for="terms">I agree to the terms</label>

<button type="button" id="signup">
    Signup
</button>

<div id="status" aria-live="polite"></div>

jQuery Top ↑

$( "#signup" ).on( "click", function () {
    if ( !$( "#terms" ).prop( "checked" ) ) {
        $( "#status" ).text(
            "Please agree to the terms."
        );
        return;
    }

    $( "#status" ).text(
        "Client-side check passed."
    );
});

Checkbox tutorial · Form validation pillar · Radio buttons

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• checkboxradio-ui.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: