breaking into the unknown…

check uncheck checkbox jquery

1 Comment

Let we have below checkboxes in our form, and we want to manipulate them through jquery, say counting the number of checkbox checked by user, checking some of them based on some condition and unchecking other based on some other condition and so on …..

=> Sample chekbox in a form

<input type="checkbox" value="confirmation" name="accept_tc" id="accept_tc" checked="checked">
<input type="checkbox" checked="checked" value="Hourly" name="newsletter">
<input type="checkbox" value="Daily" name="newsletter">
<input type="checkbox" value="Weekly" name="newsletter">
<input type="checkbox" checked="" value="Monthly" name="newsletter">
<input type="checkbox" value="Yearly" name="newsletter">

In the above form 3 checkbox will remain selected, you should note that, it will get selected even if  checked=”” i,e if you do not want a checkbox to be selected by default do not use checked attribute for it

=> jQuery Selector for checkbox

jQuery provide :checkbox selector (see here) to return all the checkbox within a form. so below line will return checkbox object.

Object[input#accept_tc confirmation, input Hourly, input Daily, input Weekly, input Monthly, input Yearly]

Similarly, jQuery provide :checked selector (see here) which when chained to :checkbox selector will return, only selected checkbox

Object[input#accept_tc confirmation, input Hourly, input Monthly]

Note: see the difference between the object elements, first checkbox have id accept_tc so returned as input#accept_tc while the other inputs are denoted in different way. It is always good to associate an id with all input element, so that it can be accessed easily on individual level with there id

=> Fetching the detail of each checkbox

Once you have a collection of object, you can iterate over it using .each method of jQuery(see here) , below is the code which iterate over each checkbox element and alert its value, name, and checked or not checked status

$("input:checkbox").each(function(){ # $(this) object represent current element of the loop
alert($(this).val()) # return value of the checkbox
alert($(this).attr('name')) # return name of the checkbox
alert($(this).is(':checked')) # return checked status of the checkbox

=> Checking checked status of checkbox

Once you have the checkbox element you can check whether it is checked or not in the below two ways. $(“input#accept_tc”) is the checkbox with id accept_tc


=> checking a checkbox
It can be done my setting the checked value of a element to be true

$("input#accept_tc").attr('checked', true)

=> unchecking a checkbox
It can be done my setting the checked value of a element to be false

$("input#accept_tc").attr('checked', false)

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

One thought on “check uncheck checkbox jquery

  1. Nice. I have also written on jQuery Selectors at where covered briefly about jQuery selectors.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s