Deaktivieren Sie ein Kontrollkästchen Radio bei Klick

Question

Ich möchte ein Optionsfeld erstellen, die einen nicht markierten Wert haben kann. Also habe ich den Code:

$('form').on('click', 'input[type="radio"]:checked', function (event) { 
    $(this).prop("checked", false); 
}); 

Nun, das ist ziemlich einfach: Klicken Sie auf ein Kontrollkästchen Radio, deaktivieren Sie es.

Aber was passiert ist, dass es nie das Radio an erster Stelle überprüft. Wenn ich auf ein ungeprüftes Radio klicke, prüft es, bevor es feststellt, ob es aktiviert ist, und prüft dann, ob es aktiviert und deaktiviert ist.

Nun, das ist kein Duplikat, da es eine andere Frage stellt. Es geht nicht darum, wie Sie das Häkchen entfernen, sondern wie Sie das Häkchen beim Klicken automatisch entfernen.

Wie kann ich dieses Problem umgehen?

Answer 1

Ihr Beispiel wird nur ausgeführt, wenn auf die Schaltfläche geklickt wird. Um das Optionsfeld beim Laden der Seite überprüfen zu lassen, würde ich ein Ereignis $(document).onload() setzen, das den Wert der Schaltfläche auf checked setzt.

Answer 2

Sie können Ihr Problem wie folgt lösen.

$('form :radio').attr('data-ischecked', function() { 
 
    return this.checked; 
 
}); //set initial status in data-ischecked attribute 
 

 
$('form').on('click', ':radio', function() { 
 
    var status = $(this).data('ischecked'); //get status 
 
    status && $(this).prop("checked", false); //uncheck if checked 
 
    $(this).data('ischecked', !status); //toggle status 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio"/> 
 
    <input type="radio"/> 
 
</form>