Html checkBox onchange not working

Question

<input class="jProblemClass" id="Checkbox{%= ID %}" type="checkbox" onchange="problemPicker.onChangeProblemCheckBox('{%=ID %}');"/>

After first check or uncheck nothing happens. Afetr second click, call my function problemPicker.onChangeProblemCheckBox, but i get ID first check. Why? Can help me anybody?

onChangeProblemCheckBox: function(id) {
    if ($('#CheckBox' + id).attr("checked") == true) {
        problemPicker.addToCheckProblems(id);

        var checkboxes = $('.jProblemClass:checked');

        if ((checkboxes.length > general.limit) && (general.limit != 0)) {
            alert('The limit of ' + general.limit + ' problems exceeded. Please deselect ' + (checkboxes.length - general.limit).toString() + '.');
        }
    } else {
        problemPicker.delFromCheckProblems(id);
    }
},

Solution 1

Bro use onclick event instead onchange.. Reason... According to the Javascript references I've read, onchange fires after the focus is lost. Unless you click somewhere else, the focus is not lost in IE. The other browsers must not be waiting for the focus to be lost before firing onchange - which suggest they are not following the spec correctly (despite it making more sense to fire at that point). How about using onclick and onkeydown/onkeyup instead (by using both onclick and onkeyup/onkeydown you cover both mouse and keyboard setting of the checkbox). REFERENCE : http://www.winvistatips.com/re-onchange-event-checkbox-not-working-properly-t311364.html

Solution 2

I think, the problem goes from here: $('#CheckBox' + id).attr("checked") == true. Accordingly to HTML specs, checked should be set to "checked" when this event fires. So, try using something like $('#CheckBox' + id).attr("checked") == "checked" or even $('#CheckBox' + id).attr("checked").

As a second option, i recommend you to use pure jquery to run your routine. For example, if you have <input type="checkbox" id="ac"> checkbox, you can use this jq code to handle your routines:

$(document).ready(function() {
    $("input[type=checkbox]").change(function() {
        alert("Am i checked? - " + $(this).attr("checked") + "\nMy ID:" + $(this).attr("id"));
    });
});

This case is shown in this demo.

Comments

[isxaker]

After i change event onchange on onclick all are work. But if i use onchange nothing work.

[David Mårtensson]

Then it might be that onchange do not fire until onblur fires, try setting focus on another element after checking the box.

[Angeline]

$('#CheckBox' + id).attr("checked") == true is the right code. $('#CheckBox' + id).attr("checked") == "checked" did not work for me.

[shybovycha]

basically, HTML references specify that attribute "checked" should be either set to "checked" or do not be set. but different browsers may specify their own data. so you'd better check if this attrib is present: $('#CheckBox' + id).attr('checked') != null. I realized this not-so-long-ago =)