Setting "checked" for a checkbox with jQuery


Javascript Problem Overview

I'd like to do something like this to tick a checkbox using jQuery:




Does such a thing exist?

Javascript Solutions

Solution 1 - Javascript

Modern jQuery

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);


If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.

Solution 2 - Javascript


$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

And if you want to check if a checkbox is checked or not:


Solution 3 - Javascript

This is the correct way of checking and unchecking checkboxes with jQuery, as it is cross-platform standard, and will allow form reposts.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

By doing this, you are using JavaScript standards for checking and unchecking checkboxes, so any browser that properly implements the "checked" property of the checkbox element will run this code flawlessly. This should be all major browsers, but I am unable to test previous to Internet Explorer 9.

The Problem (jQuery 1.6):

Once a user clicks on a checkbox, that checkbox stops responding to the "checked" attribute changes.

Here is an example of the checkbox attribute failing to do the job after someone has clicked the checkbox (this happens in Chrome).


The Solution:

By using JavaScript's "checked" property on the DOM elements, we are able to solve the problem directly, instead of trying to manipulate the DOM into doing what we want it to do.


This plugin will alter the checked property of any elements selected by jQuery, and successfully check and uncheck checkboxes under all circumstances. So, while this may seem like an over-bearing solution, it will make your site's user experience better, and help prevent user frustration.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });

        return this;
})( jQuery );

Alternatively, if you do not want to use a plugin, you can use the following code snippets:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;

Solution 4 - Javascript

You can do

$('.myCheckbox').attr('checked',true) //Standards compliant


$("form #mycheckbox").attr('checked', true)

If you have custom code in the onclick event for the checkbox that you want to fire, use this one instead:


You can uncheck by removing the attribute entirely:


You can check all checkboxes like this:


Solution 5 - Javascript

You can also extend the $.fn object with new methods:

(function($)  {
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");

Then you can just do:


Or you may want to give them more unique names like mycheck() and myuncheck() in case you use some other library that uses those names.

Solution 6 - Javascript

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);

The last one will fire the click event for the checkbox, the others will not. So if you have custom code in the onclick event for the checkbox that you want to fire, use the last one.

Solution 7 - Javascript

To check a checkbox you should use




and to uncheck a check box you should always set it to false:


If you do


it removes the attribute all together and therefore you will not be able to reset the form.

BAD DEMO jQuery 1.6. I think this is broken. For 1.6 I am going to make a new post on that.

NEW WORKING DEMO jQuery 1.5.2 works in Chrome.

Both demos use

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');

Solution 8 - Javascript

This selects elements that have the specified attribute with a value containing the given substring "ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

It will select all elements that contain ckbItem in its name attribute.

Solution 9 - Javascript

Assuming that the question is...

How do I check a checkbox-set BY VALUE?

Remember that in a typical checkbox set, all input tags have the same name, they differ by the attribute value: there are no ID for each input of the set.

Xian's answer can be extended with a more specific selector, using the following line of code:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

Solution 10 - Javascript

I'm missing the solution. I'll always use:

if ($('#myCheckBox:checked').val() !== undefined)
    //Not checked

Solution 11 - Javascript

To check a checkbox using jQuery 1.6 or higher just do this:

checkbox.prop('checked', true);

To uncheck, use:

checkbox.prop('checked', false);

Here' s what I like to use to toggle a checkbox using jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

If you're using jQuery 1.5 or lower:

checkbox.attr('checked', true);

To uncheck, use:

checkbox.attr('checked', false);

Solution 12 - Javascript

Here is a way to do it without jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);

<label>Click Me!
  <input id="cb" type="checkbox" />
  <input id="rcb" type="checkbox" />

Solution 13 - Javascript

Here is code for checked and unchecked with a button:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }

Update: Here is the same code block using the newer Jquery 1.6+ prop method, which replaces attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }

Solution 14 - Javascript

Try this:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

Solution 15 - Javascript

We can use elementObject with jQuery for getting the attribute checked:


We can use this for all jQuery versions without any error.

Update: Jquery 1.6+ has the new prop method which replaces attr, e.g.:


Solution 16 - Javascript

If you are using PhoneGap doing application development, and you have a value on the button that you want to show instantly, remember to do this

$('span.ui-[controlname]',$('[id]')).text("the value");

I found that without the span, the interface will not update no matter what you do.

Solution 17 - Javascript

Here is the code and demo for how to check multiple check boxes...

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;

Solution 18 - Javascript

Another possible solution:

    var c = $("#checkboxid");
    if (":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);

Solution 19 - Javascript

As @livefree75 said:

jQuery 1.5.x and below

You can also extend the $.fn object with new methods:

(function($)  {
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");

But in new versions of jQuery, we have to use something like this:

jQuery 1.6+

    (function($)  {
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);

Then you can just do:


Solution 20 - Javascript

If using mobile and you want the interface to update and show the checkbox as unchecked, use the following:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

Solution 21 - Javascript

For jQuery 1.6+

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

For jQuery 1.5.x and below

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

To check,


Solution 22 - Javascript

Be aware of memory leaks in Internet Explorer prior to Internet Explorer 9, as the jQuery documentation states:

> In Internet Explorer prior to version 9, using .prop() to set a DOM > element property to anything other than a simple primitive value > (number, string, or boolean) can cause memory leaks if the property is > not removed (using .removeProp()) before the DOM element is removed > from the document. To safely set values on DOM objects without memory > leaks, use .data().

Solution 23 - Javascript

To check and uncheck

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Solution 24 - Javascript

	var temp = $(this).prop('checked');
	$('controlledCheckBoxes').prop('checked', temp);

Solution 25 - Javascript

This is probably the shortest and easiest solution:

$(".myCheckBox")[0].checked = true;


$(".myCheckBox")[0].checked = false;

Even shorter would be:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Here is a jsFiddle as well.

Solution 26 - Javascript

Plain JavaScript is very simple and much less overhead:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
    elements[i].checked = true;

Example here

Solution 27 - Javascript

I couldn't get it working using:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Both true and false would check the checkbox. What worked for me was:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

Solution 28 - Javascript

When you checked a checkbox like;

$('.className').attr('checked', 'checked')

it might not be enough. You should also call the function below;

$('.className').prop('checked', 'true')

Especially when you removed the checkbox checked attribute.

Solution 29 - Javascript

Here's the complete answer using jQuery

I test it and it works 100% :D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

                 arr[i] = $(this).val(); // u can get id or anything else

              //console.log(arr); // u can test it using this in google chrome

Solution 30 - Javascript

In jQuery,




In JavaScript,

if (document.getElementById("checkboxID").checked){

Solution 31 - Javascript

In case you use ASP.NET MVC, generate many checkboxes and later have to select/unselect all using JavaScript you can do the following.


@foreach (var item in Model)
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)


function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);

Solution 32 - Javascript

This may help someone.


 <input id="check_box" type="checkbox" onclick="handleOnClick()">


  function handleOnClick(){

          console.log("current state: checked");
          console.log("current state: unchecked");

Solution 33 - Javascript


<script src=""></script>

Solution 34 - Javascript

If you are using .prop('checked', true|false) and don’t have changed checkbox, you need to add trigger('click') like this:

// Check
$('#checkboxF1').prop( "checked", true).trigger('click');

// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');

Solution 35 - Javascript


Solution 36 - Javascript

You can try this:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")

Solution 37 - Javascript

If you happen to be using Bootstrap (perhaps unawarely) ...


Solution 38 - Javascript

You can check a checkbox checked condition using JavaScript in different ways. You can see below.

  1. First method - $('.myCheckbox').prop('checked', true);

  2. Second method - $('.myCheckbox').attr('checked', true);

  3. Third method (for check condition if checkbox is checked or not) - $('.myCheckbox').is(':checked')

Solution 39 - Javascript

Edited on 2019 January

You can use: .prop( propertyName ) - version added: 1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <script src=""></script>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $ ":checked" ) + "</b>" );

On Angular Framework

Example 1

In your .html file

<input type="checkbox" (change)="toggleEditable($event)">

In your .ts file

toggleEditable(event) {
     if ( ) {
         this.contentEditable = true;

Example 2

In your .html file

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />

Solution 40 - Javascript

A JavaScript solution can be also simple and with less overhead:

document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)

document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)

checked A: <input type="checkbox" class="myCheckBox"><br/>
unchecked: <input type="checkbox"><br/>
checked B: <input type="checkbox" class="myCheckBox"><br/>

Solution 41 - Javascript

You can do this if you have the id to check it

document.getElementById('ElementId').checked = false

And this to uncheck

document.getElementById('ElementId').checked = true

Solution 42 - Javascript

If you consider using vanilla js instead of jquery there is a solution:

//for one element: 
document.querySelector('.myCheckBox').checked = true /* or false */ //will select the first matched element
//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
checkbox.checked = true //or false

Solution 43 - Javascript

For overall:



All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiontpowerView Question on Stackoverflow
Solution 1 - JavascriptXianView Answer on Stackoverflow
Solution 2 - JavascriptbchhunView Answer on Stackoverflow
Solution 3 - JavascriptcwharrisView Answer on Stackoverflow
Solution 4 - JavascriptMicahView Answer on Stackoverflow
Solution 5 - Javascriptlivefree75View Answer on Stackoverflow
Solution 6 - JavascriptChris BrandsmaView Answer on Stackoverflow
Solution 7 - JavascriptmcgrailmView Answer on Stackoverflow
Solution 8 - JavascriptAbou-EmishView Answer on Stackoverflow
Solution 9 - JavascriptPeter KraussView Answer on Stackoverflow
Solution 10 - JavascriptOverbeekeView Answer on Stackoverflow
Solution 11 - JavascriptRamon de JesusView Answer on Stackoverflow
Solution 12 - JavascriptXitalogyView Answer on Stackoverflow
Solution 13 - JavascriptstarjahidView Answer on Stackoverflow
Solution 14 - JavascriptprashanthView Answer on Stackoverflow
Solution 15 - JavascriptPrasanth PView Answer on Stackoverflow
Solution 16 - JavascriptClement HoView Answer on Stackoverflow
Solution 17 - JavascripttamilmaniView Answer on Stackoverflow
Solution 18 - JavascriptMuhammad Aamir AliView Answer on Stackoverflow
Solution 19 - JavascriptArdalan ShahgholiView Answer on Stackoverflow
Solution 20 - JavascriptMatt PeacockView Answer on Stackoverflow
Solution 21 - JavascriptloganView Answer on Stackoverflow
Solution 22 - JavascriptnaorView Answer on Stackoverflow
Solution 23 - Javascriptjj2422View Answer on Stackoverflow
Solution 24 - JavascriptmahmohView Answer on Stackoverflow
Solution 25 - JavascriptFriedrichView Answer on Stackoverflow
Solution 26 - JavascriptAlex WView Answer on Stackoverflow
Solution 27 - JavascriptfredcrsView Answer on Stackoverflow
Solution 28 - JavascriptSerhat KorogluView Answer on Stackoverflow
Solution 29 - Javascriptuser1477929View Answer on Stackoverflow
Solution 30 - JavascriptijarlaxView Answer on Stackoverflow
Solution 31 - JavascriptNoWarView Answer on Stackoverflow
Solution 32 - JavascriptSedrickView Answer on Stackoverflow
Solution 33 - JavascriptDavid ArulView Answer on Stackoverflow
Solution 34 - JavascriptAlex MontoyaView Answer on Stackoverflow
Solution 35 - JavascriptmathewView Answer on Stackoverflow
Solution 36 - JavascriptanushaView Answer on Stackoverflow
Solution 37 - JavascriptKenmeisterView Answer on Stackoverflow
Solution 38 - JavascriptGaurang SondagarView Answer on Stackoverflow
Solution 39 - JavascriptL Y E S - C H I O U K HView Answer on Stackoverflow
Solution 40 - JavascriptKamil KiełczewskiView Answer on Stackoverflow
Solution 41 - JavascriptOmar OdehView Answer on Stackoverflow
Solution 42 - JavascriptvnapastiukView Answer on Stackoverflow
Solution 43 - JavascripteggshotView Answer on Stackoverflow