Get, wenn das Kontrollkästchen in jquery/ES6 aktiviert ist

Question

Folgendes ist mein jQuery-Code, mit dem ich versuche, ob das Kontrollkästchen angeklickt wird oder nicht. Ich benutzte beide is und prop, aber irgendwie immer false und undefined in der Konsole. Lass mich wissen, was ich hier falsch mache.

Lassen Sie mich auch wissen, desto besser ist die bessere Möglichkeit, die Checkbox Wert ist auf die click oder Ereignis auf Kontrollkästchen (derzeit ich höre auf click Ereignis).

jQuery-Code -

const $document = $(document); 
$document.ready(() => { 
    $("input[type='checkbox']").on('click',() => { 
     console.log("Checked Value 'is' :: ", $(this).is(':checked')); 
     console.log("Checked Value 'prop' :: ", $(this).prop('checked')); 
    }) 
}) 

HTML CODE -

<form name="myForm" id="#myForm"> 
    <div> 
     <p><input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p> 
    </div> 
    <div> 
     <button type="submit" name="submit">Submit</button> 
    </div> 
</form> 

JSFIDDLE -https://jsfiddle.net/82Lz1c8w/4/

EDIT - Wenige der Leute, bevor Sie sich mit der Frage beschäftigen, markieren sie einfach als Duplikat, aber in diesem Fall wird die Lösung, auf die sie mit den unten erwähnten Links verweisen, nicht funktionieren, da ich Pfeilfunktionen verwende und den Kontext verändere. Bitte lesen Sie die Antworten für die Unterstützung.

Answer 1

Verwenden Sie die normale Funktion. Wenn die Pfeilsyntax verwendet wird, bezieht sich this darin auf den umschließenden Kontext. Verwenden Sie auch change Ereignis.

No binding of this

$("input[type='checkbox']").on('change', function() { 
    console.log("Checked Value 'is' :: ", $(this).is(':checked')); 
    console.log("Checked Value 'prop' :: ", $(this).prop('checked')); 
}); 

Fiddle

$("input[type='checkbox']").on('change', function() { 
 
    console.log("Checked Value 'is' :: ", $(this).is(':checked')); 
 
    console.log("Checked Value 'prop' :: ", $(this).prop('checked')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>

Answer 2

Wenn Sie die Syntax verwenden Sie den Code

$document.ready(() => { 
    $("input[type='checkbox']").on('click', (e) => { 
     console.log("Checked Value 'is' :: ", $(e.target).is(':checked')); 
     console.log("Checked Value 'prop' :: ", $(e.target).prop('checked')); 
    }) 
}) 

ändern müssen

Answer 3

Versuchen unter Code:

$("input[type='checkbox']").on('change', (e) => { 
     console.log("Checked Value 'is' :: ", e.currentTarget.checked); 
}) 

Answer 4

Arbeitscode:

const $document = $(document); 
$document.ready(() => { 
    $("input[type='checkbox']").on('click', (e) => { 
     const selfEvent = $(e.currentTarget) 
     console.log(selfEvent) 
     console.log("Checked Value 'is' :: ", selfEvent.is(':checked')); 
     console.log("Checked Value 'prop' :: ", selfEvent.prop('checked')); 
    }) 
}) 

Bitte beachten Sie, dass this bezieht sich auf window Objekt.

Answer 5

$(document).ready(function(){ 
 
    $('input[type="checkbox"]').on('click', function() { 
 
     console.log("Checked Value 'is' :: ", $(this).is(':checked')); 
 
     console.log("Checked Value 'prop' :: ", $(this).prop('checked')); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="myForm" id="#myForm"> 
 
<div> 
 
    <p><input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p> 
 
</div> 
 
<div> \t 
 
    <button type="submit" name="submit">Submit</button> 
 
</div> \t 
 
</form>

Answer 6

Bitte ersetzen Sie Javascript mit folgenden Code

const $document = $(document); 
    $document.ready(function() { 
     $("input[type='checkbox']").on('click', function(){ 
      console.log("Checked Value 'is' :: ", $(this).is(':checked')); 
    console.log("Checked Value 'prop' :: ", $(this).prop('checked')); 
    }) 

})

Answer 7

Ich glaube, Sie nicht Pfeil-Funktion wegen in Pfeil-Funktion verwendet werden soll, this ist Punkt zum übergeordneten Bereich.ersetzen $("input[type='checkbox']").on('click',() => { console.log("Checked Value 'is' :: ", $(this).is(':checked')); console.log("Checked Value 'prop' :: ", $(this).prop('checked')); })

mit

$("input[type='checkbox']").on('click', function() { console.log("Checked Value 'is' :: ", $(this).is(':checked')); console.log("Checked Value 'prop' :: ", $(this).prop('checked')); })