Question

I am rendering a checkbox in a datatable using fnRender, like this.

"aoColumnDefs":[ { 
                   "aTargets": [0],
                   "fnRender": function ( oObj ) {
   return '<input id="chkBox" name="chkBox" value="'+ oObj.aData[0] +'" type="checkbox" checked="" />';
                                                 }
                                              }
                                             ]

Now I would like to toggle the value of the checkbox on click , hence I have written the following function inside the $(document).ready( function() like this

$('.chkBox').change(function() {
                               if($(this).is(':checked')){
                                    alert("checked");
                               } else {
                                   alert("unchecked");
                               }
                            });

But this does not seem to work , and neither does Firebug throw any error. I am unable to follow this.

Can anybody please tell me whether what I am doing is correct or wrong.

Thanks in advance , vivek

Answer 1

have you tried this?

$('.chkBox').live('click',function() {
     if(this.checked){
         alert("checked");
     } else {
         alert("unchecked");
     }
});

or

$('#datatables').delegate('.chkBox','change',function() {
     if(this.checked){
         alert("checked");
     } else {
         alert("unchecked");
     }
});