Setting "checked" for a checkbox with jQuery

Question

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

$(".myCheckBox").checked(true);

or

$(".myCheckBox").selected(true);

Does such a thing exist?

A more specific (and very useful!) question, "How do I check a item in a checkbox-set BY VALUE?", I think we can also discuss here, and I posted an answer below. — Peter Krauss
– Peter Krauss, Commented Mar 9, 2012 at 12:36
Check other ways to do this using jQuery here stackoverflow.com/a/22019103/1868660 — Subodh Ghulaxe
– Subodh Ghulaxe, Commented Feb 25, 2014 at 15:46
If you need the onchange event triggered, it's $("#mycheckbox").click(); — HumanInDisguise
– HumanInDisguise, Commented May 11, 2015 at 14:06
"Checking something" suggests testing it, so I think 'Making a checkbox checked' is a more clear and better title. — Alireza
– Alireza, Commented May 12, 2015 at 17:26
prop(); function is the perfect answer. See the function definition - api.jquery.com/prop — yogihosting
– yogihosting, Commented May 23, 2016 at 15:01

Peter Mortensen · Accepted Answer · 2014-04-03 21:31:55Z

11

In jQuery,

if($("#checkboxId").is(':checked')){ alert("Checked"); }

or

if($("#checkboxId").attr('checked')==true){ alert("Checked"); }

In JavaScript,

if (document.getElementById("checkboxID").checked){ alert("Checked"); }

edited Apr 3, 2014 at 21:31

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 10, 2013 at 13:17

ijarlax

5152 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samuel Liew Over a year ago

This does not answer the question.

Blazemonger Over a year ago

This answer is out-of-date because it uses .attr instead of .prop.

SedJ601 · Accepted Answer · 2016-09-29 13:55:54Z

This may help someone.

HTML5

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

JavaScript.

 function handleOnClick(){ if($("#check_box").prop('checked')) { console.log("current state: checked"); } else { console.log("current state: unchecked"); } }

David Arul · Accepted Answer · 2017-11-01 13:19:52Z

11

if($('jquery_selector').is(":checked")){ //somecode }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Nov 1, 2017 at 13:19

David Arul

1712 silver badges4 bronze badges

1 Comment

Stephen Rauch Over a year ago

When giving an answer it is preferable to give some explanation as to WHY your answer is the one.

Peter Mortensen · Accepted Answer · 2020-03-08 23:11:59Z

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');

tech savy · Accepted Answer · 2017-12-06 11:30:14Z

9

$(".myCheckBox").prop("checked","checked");

edited Dec 6, 2017 at 11:30

answered May 13, 2013 at 9:50

tech savy

1931 silver badge6 bronze badges

1 Comment

Blazemonger Over a year ago

This answer is out-of-date because it uses .attr instead of .prop.

Peter Mortensen · Accepted Answer · 2020-03-08 23:12:59Z

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

First method - $('.myCheckbox').prop('checked', true);
Second method - $('.myCheckbox').attr('checked', true);
Third method (for check condition if checkbox is checked or not) - $('.myCheckbox').is(':checked')

anusha · Accepted Answer · 2014-04-23 06:34:58Z

You can try this:

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

L Y E S - C H I O U K H · Accepted Answer · 2019-01-02 15:10:04Z

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"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <input id="check1" type="checkbox" checked="checked"> <label for="check1">Check here</label> <p></p> <script> $( "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>" + $input.is( ":checked" ) + "</b>" ); }).change(); </script> </body> </html>

On Angular Framework

Example 1

In your .html file

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

In your .ts file

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

Example 2

In your .html file

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

Peter Mortensen · Accepted Answer · 2020-03-08 23:14:15Z

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

$('#myCheckbox').bootstrapToggle('on') $('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

Ali Sheikhpour · Accepted Answer · 2023-08-02 12:29:21Z

I was wondering why none of the old answers mentioned that to fully simulate the ticking, you also need to simulate the change event if you want to fire something else after simulating ticking:

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

Omar Odeh · Accepted Answer · 2020-12-04 12:15:43Z

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

Peter Mortensen · Accepted Answer · 2020-03-08 23:09:54Z

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/>

This belongs on Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)? or JavaScript check multiple checkbox, not this jQuery question.

vnapastiuk · Accepted Answer · 2021-07-29 07:12:02Z

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 }

eggshot · Accepted Answer · 2013-09-13 06:37:02Z

For overall:

$("#checkAll").click(function(){ $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false); });

Collectives™ on Stack Overflow

Setting "checked" for a checkbox with jQuery

44 Answers 44

2 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Edited on 2019 January

On Angular Framework

Example 1

Example 2

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

44 Answers 44

2 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Edited on 2019 January

On Angular Framework

Example 1

Example 2

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Linked

Related