Optionsfeld beim zweiten Klick deaktivieren

Ich habe viele Optionsfelder, die einen Wert aus meiner Datenbank abrufen, und wenn es auf “1” gesetzt ist, mache ich das Optionsfeld aktiviert.

Wenn eine Optionsschaltfläche aktiviert ist und ein Benutzer erneut darauf klickt, möchte ich diese Schaltfläche trotzdem löschen können. Hat jemand eine Idee?

$radio1 greift Daten aus der Datenbank und ist entweder 0, 1 oder 2

<input value="1" name="radio1" type="radio"<?php if($radio1==1){echo " checked";} ?>>
<input value="2" name="radio2" type="radio"<?php if($radio1==2){echo " checked";} ?>>

Varun Malhotras Antwort leicht modifiziert:
Ich habe 2 Codezeilen geändert, die für mich etwas besser funktionierten. Aber insgesamt war Varuns Antwort PERFEKT!

$('input[type="radio"]').click(function(){
    var $radio = $(this);

    // if this was previously checked
    if ($radio.data('waschecked') == true)
    {
        $radio.prop('checked', false);
        $radio.data('waschecked', false);
    }
    else
    {
         $radio.prop('checked', true);
         $radio.data('waschecked', true);
    }

    // remove was checked from other radios
    $radio.siblings('input[type="radio"]').data('waschecked', false);
});

Ich schlage vor, ein benutzerdefiniertes Attribut hinzuzufügen, um den vorherigen Zustand jedes Radios wie folgt zu verfolgen:

$(function(){
    $('input[name="rad"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    });
});

Sie müssen dieses Attribut auch dem anfänglich überprüften Radio-Markup hinzufügen

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

JSFIDDLE-DEMO

AKTUALISIEREN:

 $(function(){
        $('input[name="rad"]').click(function(){
            var $radio = $(this);

            // if this was previously checked
            if ($radio.data('waschecked') == true)
            {
                $radio.prop('checked', false);
                $radio.data('waschecked', false);
            }
            else
                $radio.data('waschecked', true);

            // remove was checked from other radios
            $radio.siblings('input[type="radio"]').data('waschecked', false);
        });
    });

Stellen Sie jedoch sicher, dass Sie keine anderen Funkgruppen haben, mit denen Sie arbeiten können, da Sie sonst einige Attribute angeben müssen, um diese Schaltflächen zu spezifizieren, wie z. B. Name Prop, auf den ich mich zuvor konzentriert habe.

Dies sollte allgemeiner funktionieren als die anderen Lösungen, da es Fälle behandelt, in denen sich nicht alle Funkgeräte im selben übergeordneten Element befinden.

var $radios = $('input[type="radio"]');
$radios.click(function () {
  var $this = $(this);
  if ($this.data('checked')) {
    this.checked = false;
  }
  var $otherRadios = $radios.not($this).filter('[name="'
                                               + $this.attr('name') + '"]');
  $otherRadios.prop('checked', false).data('checked', false);
  $this.data('checked', this.checked);
});

Ändern Sie das Auslösen von Ereignissen vor dem Klicken, wenn Sie zum ersten Mal klicken. Sie können sie verwenden. Arbeiten mit vielen Funkgruppen und selbst wenn Sie vorab markierte Funkfelder haben.

$("input[type=radio]").each(function() {
    var secondClick = true;
    $(this).change(function() {
        secondClick = false;
    });
    $(this).click(function() {
        if (secondClick) {
            $(this).prop("checked", false);
        }
        secondClick = true;
    });
});

JSFIDDLE-DEMO

Versuche dies

 $('input[name="rad"]').click(function(){
                    var $radio = $(this);
                    // if this was previously checked
                    if ($radio.data('waschecked') == true)
                    {
                        $radio.prop('checked', false);
                        $radio.data('waschecked', false);
                    }
                    else{
                        $radio.data('waschecked', true);
                    }
                    // remove was checked from other radios
                    $('input[name="rad"]').not($(this)).data('waschecked', false);
                });

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

Hier ist meine Lösung, die sowohl für Touch-Geräte als auch für Mausklicks funktioniert:

$('input[type=radio]').bind('touchstart mousedown', function() {
    this.checked = !this.checked
}).bind('click touchend', function(e) {
    e.preventDefault()
});

https://codepen.io/robbiebow/pen/bjPvEO

Ich weiß nicht genau warum, aber die ausgewählte Antwort des Benutzers Softvar hat bei mir nicht funktioniert, also kam ich nach etwa zwei Stunden Versuch auf der Grundlage der Antwort von Softvar auf Folgendes. Stellen Sie es hier ein, falls es jemand anderem helfen könnte. Sie können „data-active“ in HTML als 0 oder 1 angeben, basierend auf dem „ausgewählten“ Wert, den Sie aus der DB erhalten.

<input type="radio" name="user" value="1" data-active="0"> User 1
<input type="radio" name="user" value="2" data-active="0"> User 2

und

$('input[name="user"]').on('click', function() {
    if ($(this).data('active') == 0) {
        $('input[name="user"]').data('active', 0);
        $(this).data('active', 1);
    } else {
        $(this).data('active', 0);
        $(this).prop('checked', false);
    }
});