jquery click event handling
<p>When i click TD the input element inside should be selected and vise-versa,</p>

<p>I wrote the below code using jquery which is working fine but when i click on the checkbox it is not working the way a checkbox works, any ideas how to hadle this</p>

<pre><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function (){
    $(".mainTable td").click(function (){
        var obj = $(this).children('input[type=checkbox]');
        var bool = obj.prop("checked");
        if(obj.length &gt; 0){
           obj.attr("checked",!bool); 
        }
    });
});
&lt;/script&gt;

&lt;table cellpadding=10 border=1 class='mainTable'&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;table&gt;
</code></pre>
