jQuery set checkbox checked

jquery checkbox

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 ?

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

Community

you have to use the 'prop' function :

.prop('checked', true);

Before jQuery 1.6 (see user2063626's answer):

.attr('checked','checked')

You seem to have the correct answer. Could you elaborate? stackoverflow.com/a/5876747/29182

This is good to know. Overlooked this when going through the migration documentation of jQuery 3.3.x

Good to know that you can not use attr in the newer versions of jQuery as I initially thought

@Kaloyan I wish I too had known... Could've and would've saved me a lot of time.

eriknoyes

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

Why not just on one single line? $( "#even_allday_yn").prop('checked', allDay);

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?

@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.

$('#even_allday_yn').prop('checked', allDay === true) will work because allDay === true gives a boolean result.

ΩmegaMan

Try below code :

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

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

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

As in KeyOfJ's answer, use .prop('checked', true) instead of attr - I just ran into the same issue, and prop works.

FYI if you want to make use of the :checked pseudo-selector or other native checkbox HTML features, you must use .prop.

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).

Unfortunately prop is jQuery 1.6 and higher, so if you are stuck in a legacy framework that won't work for you

.attr() is the way to go for earlier versions, .prop() for jQuery 1.6+.

shadock

"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

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.

ICW

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.

I think sometimes we forget some of the more basic things are much better using raw js.

user1849310

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

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

Attr won't check the checkbox, prop is the one to do the check. Like .prop('checked', true); More info in this Post

@casivaagustin Depends on the jQuery version. I believe earlier than jQuery 1.6, .attr() did work, as described.

lordcheeto

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()

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

Subir

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.

fish-404

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

Sergio Pulgarin

Worked for me:

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

user $("#estado_cat").attr("checked","checked");

Harry

$("#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

This works, all other solutions doesn't get detected if you have a :checked style in your css

user1428716

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

    }
   });

Undo

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

Deepu

This works.

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

Eddy

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

ann

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

Danilo Piazzalunga

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

Alemoh Rapheal Baja

<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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US