Learning 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');
            e.preventDefault();
        }
        else 
            alert('Well Done!!!!');
    });
});?

See result below.

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