click event on td не работает

Question

У меня есть таблица HTML. В теге td есть флажок. Если я нажму на этот флажок, он будет проверен или снят как обычно. Но я хочу, чтобы, если я щелкнул где-нибудь на этом конкретном td, то флажок также будет проверен или снят. Потому что, если в нем много строк и флажков, вам может быть трудно точно поместить указатель мыши над флажком и нажать на кнопку (флажки маленькие, поэтому усложнить это нормально). Поэтому я хочу, чтобы это было легко для моего клиента, если он нажимает клик вне флажка, но внутри родительского тега td, то он также будет работать.

Мой код JQuery работает очень хорошо. Теперь, если я выхожу за пределы флажка, то запускается его событие click. Но проблема в том, что теперь, когда я нажимаю именно этот флажок, он не работает. Я даю свой код ниже. Здесь также находится jsfiddle link of my code.

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

Мой JQuery код:

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

UPDATE
Теперь jsfiddle код будет работать, я забыл включить библиотеку. Теперь см. Там, если вы нажмете на флажок, но он работает, но если вы нажмете именно этот флажок, то он не будет работать. любая помощь?

Answer 1

Попробуйте это:

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

Answer 2

в вашем jsfiddle просто добавить Jquery ресурс

https://code.jquery.com/jquery-2.2.4.js

Answer 3

Вы можете сделать это путем проверки Clicked элемент является флажок или не нравится следующее.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='modal-inner-content'> 
 
    <table style="border: 1px solid black;"> 
 
     <tr> 
 
      <td class='check'> 
 
       <input type='checkbox' /> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 4

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