TD上的點擊事件不起作用

Question

我有一個HTML表。 在td標簽中有一個復選框。 如果我單擊該復選框，則照常將其選中或取消選中。 但是我想要的是，如果我單擊該特定td上的任意位置，則該復選框也會被選中或未選中。 這是因為如果那里有很多行和復選框，那么您可能會發現很難將鼠標指針准確地放在復選框上並按一下單擊（復選框很小，因此發現困難很正常）。 因此，我希望它對我的客戶來說很容易，如果他在復選框外部但在父td標簽內部按一下單擊，那么它也將起作用。

我的JQuery代碼工作得很好。 現在，如果我在復選框外部單擊，則會觸發其單擊事件。 但是現在的問題是，如果我完全單擊該復選框，則它不起作用。 我在下面給出我的代碼。 這也是jsfiddle link of my code的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);
});  

更新
現在，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

您可以通過選中clicked元素為checkbox或不像下面這樣來實現。

 $('.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 3

在您的jsfiddle中只需添加Jquery資源

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

Answer 4

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