Question

I’m trying to get the checked state of a checkbox after it’s changed. When I click the checkbox or hit enter on my “search text box” it should toggle the checkbox’s checked state then return the updated value. My example works in FF but not in IE

JSFiddle Example

html:

<!--
    hit enter and it should toggle the checkbox state and return the updated value
    it works as expected in FF but not in IE
-->

<input type='text' class='txt_search' />
<input type='checkbox' class='chk_test' />

javascript:

$('.txt_search').keyup(function(event){
    if(event.keyCode == '13')
    {
        $('.chk_test').click();
    }
});


$('.chk_test').change(function(){
   var self=$(this);
   alert(self.prop('checked'));
});

Answer 1

Although I wasn’t able to replicate the problem, this might be the cause of your issue: You’re calling the click event on a checkbox and then binding to the change event. Instead, try just setting the attribute of the checkbox appropriately. You can toggle via this method as well based on whether they entered something in the textbox:

UPDATE: Now works with IE8 by using bind.

$('.txt_search').keyup(function(event){
    if(event.keyCode == '13')
    {
        var chk =  $('input.chk_test');
        chk.prop('checked', !!$(this).val());
    }
});

$('.chk_test').bind('change', function(){
    var self=$(this);
    alert(self.is(':checked'));
});

Fiddle proof: http://jsfiddle.net/CVQjd/6/