klicken Ereignis auf td nicht funktioniert

Question

Ich habe eine HTML-Tabelle. Im Tag td gibt es ein Kontrollkästchen. Wenn ich auf dieses Kontrollkästchen klicke, wird es wie üblich aktiviert oder deaktiviert. Aber was ich will, ist, dass, wenn ich irgendwo auf die spezifische td klicken, dann das Kontrollkästchen wird auch aktiviert oder deaktiviert. Wenn viele Zeilen und Kontrollkästchen vorhanden sind, kann es schwierig sein, den Mauszeiger genau über das Kontrollkästchen zu setzen und einen Klick zu drücken (die Kontrollkästchen sind klein, so dass es schwierig ist, sie zu finden, ist normal). Also möchte ich, dass es für meinen Kunden einfach ist, wenn er einen Klick außerhalb der Checkbox drückt, aber innerhalb des übergeordneten Tags td dann wird es auch funktionieren.

Mein JQuery-Code funktioniert sehr gut. Wenn ich nun außerhalb des Kontrollkästchens klicke, wird das Click-Ereignis ausgelöst. Aber das Problem ist jetzt Wenn ich genau auf das Kontrollkästchen klicke, dann funktioniert es nicht. Ich gebe meinen Code unten. Hier ist auch eine 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> 

Mein JQuery-Code:

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

UPDATE
Nun ist die jsfiddle Code funktioniert, ich habe vergessen, die Bibliothek zu schließen. Jetzt sehen Sie dort, wenn Sie außerhalb des Kontrollkästchens klicken, dann funktioniert es, aber wenn Sie genau auf das Kontrollkästchen klicken, dann funktioniert es nicht. irgendeine Hilfe?

Answer 1

Try this:

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

Answer 2

in Ihrem jsfiddle fügen Sie einfach JQuery Ressource

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

Answer 3

Sie es, indem Sie das klickten Element tun können, ist Checkbox oder nach nicht mögen.

$('.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); 
});