Having problems with checkbox validations? Then you’re not alone. Checkbox validation is usually more difficult due to its nature of having multiple values at the same time.
Consider this simple form where a user is required to select at least one checkbox:
Which of the following jQuery selectors do you usually use?
(Please select at least one)
Which of the following jQuery events do you usually encounter?
(Please select at least one)
<b>Which of the following jQuery selectors
do you usually use? (Please select at least one)</b><br>
<input type="checkbox" name="selector[]"
id="selector" value="id">#id<br>
<input type="checkbox" name="selector[]"
id="selector" value="class">.class<br>
<input type="checkbox" name="selector[]"
id="selector" value="element">element[@attribute]<br><br>
<b>Which of the following jQuery events
do you usually encounter? (Please select at least one)</b><br>
<input type="checkbox" name="event[]"
id="event" value="click">click<br>
<input type="checkbox" name="event[]"
id="event" value="focus">focus<br>
<input type="checkbox" name="event[]"
id="event" value="change">change<br>
<input type="checkbox" name="event[]"
id="event" value="blur">blur<br>
<input type="checkbox" name="event[]"
id="event" value="submit">submit<br>So how do we do the validation?
First we’ll have to bind the validations with the form’s submit event (submit() event on jQuery) and return false for all empty checkbox groups to prevent the form triggering its submission.
Without using jQuery, you’ll have to iterate through all of the checkbox elements, then check for the checked status of each individual check boxes (if none is checked then return false). And you’ll have to do this for each check box grouping.
However, jQuery makes things a little bit easier by introducing a selector filter for checked elements.
Using the :checked filter, it will select all of the checked elements for a particular element. so in this case,
$("input:checked")will select all of the checked input elements. However, this is a downside for this. The :checked filter does not support #id and .class selectors so the following won’t work:
$("#selector:checked")
$("#event:checked")So how do we work around this? Its pretty simple, by specifying the id, class, or even as an attribute, we can now separate the checkboxes according to its grouping. In this example, we are going to be using the #id to separate our checkboxes.
var selector_checked = $("input[@id=selector]:checked").length;
var event_checked = $("input[@id=event]:checked").length;
if (selector_checked == 0)
{
return false;
}
else if (selector_checked == 0)
{
return false;
}
else
{
return true;
}Its much simpler than iterating through each checkbox, since jQuery automatically does this for us. For two different checkbox groups, this is acceptable. However, when we would need to deal with more checkbox groupings, this can become a problem since the code will become more cluttered by then.
To simplify things, we’ll just make our own function passing the #id as a parameter to check for each checkbox group’s status. This is how the script would finally look like.
$(document).ready(function()
{
$("form").submit(function()
{
if (!isCheckedById("selector"))
{
alert ("Please select at least one selector");
return false;
}
else if (!isCheckedById("event"))
{
alert ("Please select at least one event");
return false;
}
else
{
return true; //submit the form
}
});
function isCheckedById(id)
{
var checked = $("input[@id="+id+"]:checked").length;
if (checked == 0)
{
return false;
}
else
{
return true;
}
}
});
10 Comments 
