Wahid Masud Wahid Masud - 1 year ago 53
jQuery Question

click event on td not working

I have an HTML table. In the

tag there is a checkbox. If I click on that checkbox then it gets checked or unchecked as usual. But what I want is that If I click anywhere on that specific
then the checkbox will also get checked or unchecked. Its because if there are a lot of rows and checkboxes there then you might find it hard to exactly put your mouse pointer over the checkbox and press a click (checkboxes are small so finding it difficult is normal). So I want it to be easy for my client, if he press a click outside the checkbox but inside the parent
tag then it will also work.

My JQuery code is working very good. Now if I click outside the checkbox then its click event is triggered. But the problem is now If I click exactly on the checkbox then it is not working. I am giving my code below. Here is also a
jsfiddle link of my code

<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<td class='check'><input type='checkbox'/></td>

My JQuery code:

$('.modal-inner-content').on('click', 'td', function(){
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);


Now the jsfiddle code will work, i forgot to include the library. Now see there, if you click outside the checkbox then its working but if you click exactly on the checkbox then its not working. any help?


Try this:

$('.modal-inner-content td').click(function (event) {
        if (!$(event.target).is('input')) {
           $('input:checkbox', this).prop('checked', function (i, value) {
            return !value;