Validate HTML CheckboxList using jQuery

In yesterday's post, I had posted about how to "Validate ASP.NET CheckboxList using jQuery", but pure HTML checkbox list is slightly different. The main problem is that it can't be accessed using ID because every checkbox will have different ID. But they share one common attribute which is "name". So while accessing checkboxes in jQuery, need to use "name" attribute.

Let's declare a HTML checkboxlist.
<input type="checkbox" name="technologies" value="jQuery" /> jQuery <br/>
<input type="checkbox" name="technologies" value="JavaScript" />JavaScript <br/>
<input type="checkbox" name="technologies" value="Prototype" /> Prototype<br/>
<input type="checkbox" name="technologies" value="Dojo" /> Dojo<br/>
<input type="checkbox" name="technologies" value="Mootools" /> Mootools <br/>
As you can see there are 5 checkboxes and the validation would be to select at least 3 technologies. And on click of button, validate the checkboxlist. To find out, how many checkboxes are checked, use length property to find out.

$("input[name='technologies']:checked").length; will give count of checked checkboxes out of the list.
$(document).ready(function() {
    $('#btnSubmit').on('click', function(e) {
        var cnt = $("input[name='technologies']:checked").length;
        if (cnt < 3) 
            alert('Select at least 3 technologies');
            alert('Well Done!!!!');
See result below.

See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..