Simple jQuery function work in all browsers but not in IE

Question

function check_info(id,value){

    var data = $("#"+id+":checked").val();

    if(value==1){ 

        if(data == 'on'){

           var id_val = id.substring(7);
            $("#user_g"+id_val).css("display","block");
            $(".chkbox_"+id_val).attr("checked","checked");
            $("#user_hidden_"+id_val).val("2");

        }
        else{
            var id_val = id.substring(7);
            $("#user_hidden_"+id_val).val("0");
            $("#user_g"+id_val).css("display","none");
            $(".chkbox_"+id_val).attr("checked","");
            $("#user_hidden_"+id_val).val("0");
        }
    }
 ......
 ......

}

The function should be called from here and according to checkbox option, it will show the following div or hide. It works well in all browsers but not any version of IE. Please help.

<input name="gro_id_1" type="checkbox" id="gro_id_1"   onclick="javascript:check_info(this.id,'1')" title="Office">


<div id="user_g1" class="gr_block">
    --- outupt ---
</div>

Answer 1

Consider:

1. rephrasing the if(data == 'on') as if ($("#"+id).is(":checked"))
2. replacing .attr("checked", "") with .removeAttr("checked")

3. binding the checkbox event with the following, instead of onclick=

   $(function() {
       $("#gro_id_1").click(function() {
           check_info(this.id, '1');
       });
   });
   

Answer 2

I would suggest to use $("#user_g"+id_val).show() instead of $("#user_g"+id_val).css("display","block"); and use $("#user_g"+id_val).hide() instead of $("#user_g"+id_val).css("display","none");.

This is probably not the issue, but this is the more "jQuery Standard" way of doing hiding and showing elements.

Also, where is the value var coming from? Is it in scope, because I can't see it in the code snippet.

onclick="javascript:check_info(this.id,'1')" may be your problem. Attempt what Oren suggested above.