JQuery Require Checkbox and Radio Button before submit

Question

I am having one heck of a hard time trying to figure this out. Been looking at examples and tools for JQuery validation for over 3 hours now.

All I want to do is require that a checkbox is selected and a radio button, but I don't care which one is required.

<form id="form1" action="/controller/action" method="post">
    <div class="checkbox"><input type="checkbox" name="box1" class="cBox" /><label for="box1" class="label">Box1</label></div>
    <div class="checkbox"><input type="checkbox" name="Box2" class="cBox" /><label for="Box2" class="label">Box2</label></div>
    <div class="checkbox"><input type="checkbox" name="Box3" class="cBox" /><label for="Box3" class="label">Box3</label></div>
    <div class="radio"><input type="radio" name="print" value="Radio1" class="rad" /><label class="label">Radio1</label></div>
    <div class="radio"><input type="radio" name="print" value="Radio2" class="rad" /><label class="label">Radio2</label></div>
    <div class="radio"><input type="radio" name="print" value="Radio3" class="rad" /><label class="label">Radio3</label></div>
    <input type="submit" value="Submit" />
</form>

Any help would be greatly appreciated.

Answer 1

To do this you have to use the :checked selector. Although JP's answer is fine, I'd probably do this:

$('#form1').submit(function() {
    if ($('input:checkbox', this).is(':checked') &&
        $('input:radio', this).is(':checked')) {
        // everything's fine...
    } else {
        alert('Please select something!');
        return false;
    }
});

Couple of notes:

• I think it reads better to use the is function, which returns a boolean of the selector.
• You can use :radio and :checkbox as a shortcut for selecting all radios and checkboxes in a form. However, according to the jQuery manual, it is bad practice to use these selectors without specifying input before them, as they evaluate to *:checkbox and *:radio otherwise, which are very slow selectors.
• By passing this as the second argument we are specifying a context for the search, and thus are only searching for checkboxes and radio inputs inside the current form. Without it we might get false positives if there happens to be another form in the page.

Answer 2

$('#form1').submit(function(){
    if ($(':checkbox:checked', this)[0] && $(':radio:checked', this)[0]) {
        // everything's fine...
    } else {
        alert('Please select something!');
        return false;
    }
});