Learning jQuery

Yesterday I needed to find out if checkbox is checked or not using jQuery. I was knowing one way to find out but there are couple of other ways as well to find out if checkbox is checked using jQuery. In this post, you will find all different possible ways.

You may also like:

• Check if radio button is checked or selected using jQuery
• Validate HTML CheckboxList using jQuery
• Limit number of checkboxes checked by User
• Disable odd checkbox of Checkbox list using jQuery

1. First Way:

Below single line of code will provide the status of checkbox using jQuery. It checks whether the checked is checked or not using jQuery and will return 1 or 0.

var isChecked = $('#chkSelect').attr('checked')?true:false;

I have noticed that on many website it is written that 'checked' attribute will return true or false, but this is not correct. If the checked box is checked then it return status as "checked", otherwise "undefined".

So if you want to have true or false, then you need to use conditional expression as I have done in the code.

If you are using jQuery 1.6+ version, then you should use "prop", instead of "attr". Find out more about CSS Class, Attribute, Property and jQuery.

var isChecked = $('#chkSelect').prop('checked');

"prop()" will return status as true or false unlike "attr()" which returns checked or undefined.

2. Second Way

var isChecked = $('#chkSelect:checked').val()?true:false;

$('#chkSelect:checked').val() method returns "on" when checkbox is checked and "undefined", when checkbox is unchecked.

3. Third Way

var isChecked = $('#chkSelect').is(':checked');

The above method uses "is" selector and it returns true and false based on checkbox status.

4. Fourth Way

The below code is to find out all the checkbox checked through out the page.

$("input[type='checkbox']:checked").each( 
    function() { 
       // Your code goes here...
    } 
);

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