jQuery change event on checkbox

A lot of times, you’ll want to call a javascript function when a checkbox is changed from unchecked to check and vice versa. Up until the release of jQuery 1.4, the obvious way to do it (the jQuery .change() event) did not work properly across all versions of Internet Explorer. Instead, you had to check for the .click() event. This was an accessibility problem because it did not fire when a user changed a checkbox with the space bar instead of by clicking. Well, now we can rejoice. The following code snippet works exactly how you think it would across browsers, including IE.

<!-- Load jQuery, and the necessary html -->
<script type='text/javascript src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<input type='checkbox' name='my_checkbox' value='true' checked='checked'>
$(document).ready(function(){
    $(":checkbox").change(function(){
        if($(this).attr("checked"))
        {
            //call the function to be fired
            //when your box changes from
            //unchecked to checked
        }
        else
        {
            //call the function to be fired
            //when your box changes from
            //checked to unchecked
        }
    });
});
Leave a comment ?

19 Comments.

  1. what is the “:” doing in this statement?
    $(“:checkbox”)

  2. Selects all the checkboxes on the page.

  3. helpful..

  4. I used a modified version of this that works VERY well (the above actually didn’t work right.


    $(document).ready(function(){
    $(":checkbox").change(function(){
    if($(this).is(':checked')) showCol(this.value);
    else hideCol(this.value);
    });
    });

    showCol and hideCol are simply functions that show/hide a table column. 🙂

  5. thank you, it’s very useful for me
    😛

  6. What if I want a specific checkbox not every checkbox?

  7. Thanks its really a great help for me.

  8. Thanks for this little tutorial, very useful!

  9. Code really works thanks for ur code

  10. $(‘input:checkbox[Title=”Mycheck”]’).change(function (){
    if ($(this).attr(‘checked’)) {
    alert(‘is checked’);
    } else {
    alert(‘not checked’);
    }
    });

  11. thanks . very useful 😆

  12. $(“:checkbox”).change(function(e) {

    if($(this).is(“:checked”))
    {

    $(“ul ul”).slideUp(“slow”);
    }
    else
    {
    $(“ul ul”).slideDown(“slow”);
    }
    });
    this code work very well

  13. i used jquery grid.. and my code doesnt exist when i click an editing the check box in jquery.. a have a certain fields for editing .. what codes can i used/

    function EditProcess(id) {
    var lastsel;
    if (id && id !== lastsel) {
    $(“#grdFM_Process”).restoreRow(lastsel);
    lastsel = id;
    var objRowData = $(“#grdFM_Process”).getRowData(lastsel);

    $(“[id$=’hidProcessID’]”).val(id);
    $(“[id$=’txtProcessName’]”).val(objRowData.ProcessName);
    $(“[id$=’txtDocCode’]”).val(objRowData.ProcessCode);
    $(“[id$=’ddl_FM_Category’]”).val(objRowData.CategoryID)
    // document.getElementById(“CheckBox1”).checked = true;
    // document.getElementById(“CheckBox1”).checked = false;
    if (objRowData.SubDocuments == ‘True’) {
    $(“[id$=’MainContent_ctlFM_Process1_CheckBox1′]”).attr(‘checked’, true);
    } else {
    $(“[id$=’MainContent_ctlFM_Process1_CheckBox1′]”).removeAttr(‘checked’);
    }

    $(“[id$=’btnAdd_process’]”).attr(“src”, “../images/save.jpg”);
    $(“[id$=’btnAdd_process’]”).hover(
    function () {
    $(this).attr(“src”, “../images/save_active.jpg”);
    },
    function () {
    $(this).attr(“src”, “../images/save.jpg”);
    }
    );
    }
    }

  14. this.checked is MUCH faster than $(this).attr("checked")

  15. I want to send the checkbox value to php page and insert or delete in database, how do i do that with this script including ajax

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>