jQuery set checkbox checked

Question

I already tried all the possible ways, but I still didn't get it working. I have a modal window with a checkbox I want that when the modal opens, the checkbox check or uncheck should be based on a database value. (I have that already working with others form fields.) I started trying to get it checked but it didn't work.

My HTML div:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>
             
          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

and the jQuery:

$("#estado_cat").prop( "checked", true );

I also tried with attr, and others seen here in the forums, but none seem to work.
Can someone point me the right way?

EDIT

OK, I'm really missing something here. I can check/uncheck using code if the check box is in the page, but is it's in the modal window, I can't. I tried dozens of different ways.

I have a link that's supposed to open the modal:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

and jQuery to "listen" the click and execute some operations like filling some text boxes with data coming from database. Everything works like I want but the problem is that I can't set checkbox checked/unchecked using code. Help please!

$(function () {
    $(".editButton").click(function () {
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "process.php",
            dataType: "json",
            data: {
                id: id,
                op: "edit"
            },
        }).done(function (data) {
            // The next two lines work fine,
            // i.e. it grabs the value from database and fills the textboxes
            $("#nome_categoria").val(data['nome_categoria']);
            $("#descricao_categoria").val(data['descricao_categoria']);

            // Then I tried to set the checkbox checked (because it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });
        
        evt.preventDefault();
        return false;
    });
});

what class is applied on modal div when the modal opens ? Also how do you check the database value - Using AJAX or is it already pre-fetched and stored in a variable ? — user1428716, Feb 23 '13 at 19:07
set check box after loading modal window I think you are setting the check box before loading the modal window. $('#fModal').modal('show'); $("#estado_cat").attr("checked","checked"); — Vineeth Bhaskaran, Mar 10 '14 at 18:00

score 905 · Answer 1 · edited May 23 '17 at 11:47

905

you have to use the 'prop' function :

.prop('checked', true);

Before jQuery 1.6 (see user2063626's answer):

.attr('checked','checked')

edited May 23 '17 at 11:47

Community

1
1

answered Oct 28 '13 at 09:18

singe Batteur

9,059
1
9
2

5

You seem to have the correct answer. Could you elaborate? http://stackoverflow.com/a/5876747/29182 – Ziggy Dec 10 '13 at 14:29
1

This is good to know. Overlooked this when going through the migration documentation of jQuery 3.3.x – reaper_unique Jun 11 '18 at 06:39
1

Good to know that you can not use attr in the newer versions of jQuery as I initially thought – Kaloyan Dec 20 '18 at 14:16
1

This should be the accepted answer. – Zak Mar 03 '21 at 19:12

score 83 · Answer 2 · answered Apr 23 '14 at 06:32

83

Taking all of the proposed answers and applying them to my situation - trying to check or uncheck a checkbox based on a retrieved value of true (should check the box) or false (should not check the box) - I tried all of the above and found that using .prop("checked", true) and .prop("checked", false) were the correct solution.

I can't add comments or up answers yet, but I felt this was important enough to add to the conversation.

Here is the longhand code for a fullcalendar modification that says if the retrieved value "allDay" is true, then check the checkbox with ID "even_allday_yn":

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}

answered Apr 23 '14 at 06:32

eriknoyes

839
6
4

50

Why not just on one single line? `$( "#even_allday_yn").prop('checked', allDay);` – Xavier Hayoz Oct 23 '14 at 14:43
5

He was trying to demonstrate the possible values. How would you know the real value of the "allDay" without an example like this one here? – Soroush Falahati Jan 30 '17 at 02:00
1

@Xavier Hayoz. This works if, and only if, allDay returns 'true' or 'false' as a litteral value — not a pure binary one. Checkboxes ar badly designed in html and their checked status can be expressed in very different ways. The safe and only one way I know of is: allDay === 'true' ? $('#even_allday_yn).prop ("checked", true): $('#even_allday_yn).prop ("checked", false). Notice the strict equality operator. – Brice Coustillas Apr 27 '17 at 08:46
1

`$('#even_allday_yn').prop('checked', allDay === true)` will work because `allDay === true` gives a boolean result. – leftclickben Oct 24 '17 at 08:45

score 63 · Answer 3 · answered Feb 23 '13 at 19:11

63

Dude try below code :

$("div.row-form input[type='checkbox']").attr('checked','checked')

OR

$("div.row-form #estado_cat").attr("checked","checked");

OR

$("div.row-form #estado_cat").attr("checked",true);

answered Feb 23 '13 at 19:11

31

As in KeyOfJ's answer, use `.prop('checked', true)` instead of `attr` - I just ran into the same issue, and `prop` works. – semmelbroesel Oct 16 '13 at 20:45
5

FYI if you want to make use of the `:checked` pseudo-selector or other native checkbox HTML features, you must use `.prop`. – benastan Nov 14 '13 at 00:57
1

Tried this and it didn't work but when I changed the code to $("div.row-form #estado_cat").prop("checked","checked"); it did work. (Changed attr to prop). – Jim Evans Mar 04 '14 at 16:01
1

Unfortunately prop is jQuery 1.6 and higher, so if you are stuck in a legacy framework that won't work for you – wolffer-east Jan 16 '15 at 22:03
`.attr()` is the way to go for earlier versions, `.prop()` for jQuery 1.6+. – vapcguy Jul 01 '15 at 19:07

score 29 · Answer 4 · answered Feb 11 '16 at 13:31

"checked" attribute 'ticks' the checkbox as soon as it exists. So to check/uncheck a checkbox you have to set/unset the attribute.

For checking the box:

$('#myCheckbox').attr('checked', 'checked');

For unchecking the box:

$('#myCheckbox').removeAttr('checked');

For testing the checked status:

if ($('#myCheckbox').is(':checked'))

Hope it helps...

KeyOfJ · Answer 5 · 2013-05-31T12:32:51.380

Since you are in a modal window (whether dynamic or in the page) you can use the following code to accomplish your goal: (I ran into the same problem on my site and this is how I fixed it)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

CODE:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

In the above "kendoWindow" is my window (mine is dynamic, but I also do this when appending to an element directly in the page). I am looping through an array of data ("queriesToAddToGroup") to see if any rows have an attribute of COPY. If so I want to turn on the checkbox within the window that sets that attribute when a user saves from this window.

It should be noted that while other answers to the question at hand may "work", using `prop` as this answer suggests is the CORRECT way of accomplishing dynamic jQuery checkbox checking/un-checking. — Joshua Burns, Aug 14 '13 at 23:03

score 11 · Answer 6 · answered Jun 26 '14 at 14:59

11

.attr("checked",true)
.attr("checked",false)

will work.Make sure true and false are not inside quotes.

answered Jun 26 '14 at 14:59

user1849310

451
6
10

2

Attr won't check the checkbox, prop is the one to do the check. Like `.prop('checked', true);` [More info in this Post](http://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/) – casivaagustin Oct 08 '14 at 22:08
@casivaagustin Depends on the jQuery version. I believe earlier than jQuery 1.6, `.attr()` did work, as described. – vapcguy Jul 01 '15 at 19:09

Isaac C Way · Answer 7 · 2021-05-07T14:28:33.407

9

I know this asks for a Jquery solution, but I just thought I'd point out that it is very easy to toggle this in plain javascript.

var element = document.getElementById("estado_cat");
element.checked = true;

It will work in all current and future versions.

edited May 07 '21 at 14:28

answered Jun 22 '19 at 20:42

Isaac C Way

2,113
2
12
23

2

I think sometimes we forget some of the more basic things are much better using raw js. – LarryBud Feb 11 '21 at 19:35

score 5 · Answer 8 · answered Aug 31 '13 at 07:07

5

You can write like below given code.

HTML

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

Hope it work for you.

answered Aug 31 '13 at 07:07

Subir

130
1
3
10

score 5 · Answer 9 · answered Oct 25 '18 at 16:13

5

If you're wanting to use this functionality for a GreaseMonkey script to automatically check a checkbox on a page, keep in mind that simply setting the checked property may not trigger the associated action. In that case, "clicking" the checkbox probably will (and set the checked property as well).

$("#id").click()

answered Oct 25 '18 at 16:13

lordcheeto

1,024
11
16

Because the checkbox has functionality that goes with it, this is the clean way of setting it as checked and let the associated logic run accordingly. There's a strong case to be made for this to be the accepted answer – Gene Bo Apr 26 '21 at 01:22

reza akhlaghi · Answer 10 · 2019-12-09T05:31:43.677

<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>

score 3 · Answer 11 · edited Oct 21 '13 at 08:02

3

$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Find will return array , so use [0] to get even if there is only one item

if you don't use find then

$("#subclip_checkbox").checked=true;

this worked fine in Mozilla Firefox for me

edited Oct 21 '13 at 08:02

Harry

80,224
23
168
185

answered Oct 03 '13 at 10:55

Arvin

796
3
10
32

1

This works, all other solutions doesn't get detected if you have a :checked style in your css – bhappy Nov 04 '15 at 19:05

score 3 · Answer 12 · answered Jan 23 '14 at 20:49

3

Worked for me:

$checkbok.prop({checked: true});

answered Jan 23 '14 at 20:49

Sergio Pulgarin

760
6
19

user $("#estado_cat").attr("checked","checked"); – Vineeth Bhaskaran Mar 10 '14 at 17:23

user1428716 · Answer 13 · 2013-02-23T19:20:00.677

2

Try this since your are using jQuery UI probably (if not please comment)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });

edited Feb 23 '13 at 19:20

answered Feb 23 '13 at 19:13

user1428716

1,920
1
16
32

@user2063626 - the part of the js inside the function is copied from your answer – user1428716 Feb 23 '13 at 19:14

score 2 · Answer 14 · edited Nov 19 '13 at 20:00

2

Have you tried running $("#estado_cat").checkboxradio("refresh") on your checkbox?

edited Nov 19 '13 at 20:00

Undo

25,204
37
102
124

answered Sep 25 '13 at 18:53

J2N

291
4
18

score 2 · Answer 15 · edited Feb 18 '14 at 13:08

2

This works.

 $("div.row-form input[type='checkbox']").attr('checked','checked');

edited Feb 18 '14 at 13:08

Deepu

11,425
13
53
87

answered Nov 28 '13 at 15:45

Chetan Patel

129
12

score 2 · Answer 16 · edited Sep 21 '15 at 11:30

2

This occurs because you with the newest version of jquery attr('checked') returns 'checked' while prop('checked') returns true.

edited Sep 21 '15 at 11:30

ann

584
1
9
19

answered Jan 03 '14 at 01:33

Rohan

3,148
1
27
35

score 2 · Answer 17 · answered Mar 10 '14 at 14:29

I encountered this problem too.

and here is my old doesn't work code

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

here is my new code which is worked now:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

so,the key point is before it worked ,make sure the checked property does exist and does not been removed.

Much simplier: `Jbookaccess.prop("checked", data.access != 'private');` — Legionar, Jun 06 '16 at 08:43

score 1 · Answer 18 · edited Mar 10 '14 at 18:14

1

Set the check box after loading the modal window. I think you are setting the check box before loading the page.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");

edited Mar 10 '14 at 18:14

Danilo Piazzalunga

6,909
5
43
65

answered Mar 10 '14 at 17:46

Vineeth Bhaskaran

1,801
1
26
31

score 0 · Answer 19 · answered Jun 05 '20 at 12:05

<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

Remember to increment the the id and for attribute respectively. For Dynamically added bootstrap check box.

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})

jQuery set checkbox checked

EDIT

19 Answers19

Linked

Related