aktivieren/deaktivieren Sie radio input mit javascript

jQuery edition

//bind to retrieve old status
$('input[type="radio"]').mousedown(function() { 
    //if it was checked before
    if(this.checked) {
        //bind event to reset state after click is completed
        $(this).mouseup(function() {  
            //bind param, because "this" will point somewhere else in setTimeout
            var radio = this;
            //apparently if you do it immediatelly, it will be overriden, hence wait a tiny bit
            setTimeout(function() { 
                radio.checked = false; 
            }, 5); 
            //don't handle mouseup anymore unless bound again
            $(this).unbind('mouseup');
        });
    }
});

Aber nochmals, dies ist nicht wie radio-buttons verwendet werden sollen. Ich glaube, Sie wäre besser mit einer checkbox markieren ' es, wo Sie konnte, deaktivieren Sie alle anderen Kontrollkästchen als aktuellen geklickt (also immer max 1 ausgewählt)

Ein funktionierendes Beispiel

Ich hatte das gleiche problem und es herausgefunden. Keine der oben genannten Antworten genau so funktioniert, wie ich wollte - die meisten von Ihnen erfordern eine zusätzliche Taste, um das Funkgerät zurückzusetzen. Das Ziel war, deaktivieren Sie radio, indem Sie auf das radio selbst.

Hier das fiddle: http://jsfiddle.net/MEk5Q/1/

Das problem war sehr kompliziert, weil die radio-Taste, value-änderungen VOR dem click event feuert also, wenn wir hören, um das Ereignis können wir nicht sagen, ob der radio-button bereits aktiviert war oder nicht. In beiden Fällen ist es bereits aktiviert ist.
Ein weiterer Ansatz war zu hören mousedown Veranstaltung. Im Gegensatz zu click wird, feuert vor dem Wechsel radio checked Attribut, aber deaktivieren Sie es innerhalb von event-handler gibt uns nichts da, es wird überprüft, wieder im mouseup-Ereignis.

Meine Antwort ist ein wenig hässlicher workaround, so dass ich generell nicht empfehlen, es an andere und wahrscheinlich werde ich es aufgeben mich. Es funktioniert, sondern es sich um 20ms timeout-Funktion, die ich bin nicht gern in Fällen wie diesem.

Hier ist der code Erklärung:

$('input[type="radio"]').on('mousedown', function() {
    if (this.checked) { //on mousedown we can easily determine if the radio is already checked
        this.dataset.check = '1'; //if so, we set a custom attribute (in DOM it would be data-check="1")
    }
}).on('mouseup', function() {
    if (this.dataset.check) { //then on mouseup we determine if the radio was just meant to be unchecked
        var radio = this;
        setTimeout(function() {radio.checked = false;}, 20); //we give it a 20ms delay because radio checking fires right after mouseup event
        delete this.dataset.check; //get rid of our custom attribute
    }
});

Als timeout-Funktion die ich verwenden könnte, eine Zeichenfolge (weniger schreiben), aber soweit ich weiß, wäre es eval'ed. Wenn ich nicht Vertrauen eval Funktion, ich bevorzugte anonyme Funktion.

Noch eins - man könnte Fragen , warum die Verbreitung der code in zwei separaten event-Handler, während wir das Feuer der timeout-Funktion auf mousedown? Nun, was ist, wenn jemand drücken Sie die Maus auf ein radio und hält es für ein paar Sekunden oder sogar jemand ist einfach ein sehr langsamer Mensch ;). In der Regel, mit dieser Lösung lassen wir das problem der Zeitverzögerung zwischen mousedown und mouseup.

Wenn Sie benötigen ein paar mehr Infos über dataset, hier ist die MDN-Referenz:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
Diese Eigenschaft kam mit HTML5 und könnte nicht cross-browser, denke ich, wenn Sie so wollen, 100% ig kompatibel ist, ersetzen Sie es mit einer anderen Lösung das wird, enthalten die Daten, you name it.

Sorry über jQuery hier und da, aber ich hoffe, du bist gut mit dabei - es war viel einfacher.

Hoffe, Sie werden es genießen.

Dieses Verhalten wird nicht erwartet, dass man für radio-buttons und ich weiß nicht empfehlen, es überhaupt nicht. Versuchen Sie einen anderen Weg finden, dieses Ziel zu erreichen. Verwenden Sie ein anderes Element oder eine andere option zum zurücksetzen des Feldes Wert:

http://jsfiddle.net/marcosfromero/rRTE8/

Nie war ich glücklich darüber, gezwungen zu sein, Zielen auf das kleine radio-button, und so kam ich auf ein größeres Ziel UND ein Weg zu einem radio-Gruppe ab, ohne Rückgriff auf etwas, das würde stören die HTML - /JavaScript-Puristen.

Die Technik beruht auf der nicht missbrauchen die radio-buttons bei alle über event-Handler, aber die überprüfung für eine readonly-proxy für jeden statt. Alles enthalten ist, was unten in reinem JavaScript mit einem radio-Gruppe ein, wählen Sie eine Art von Käse oder ohne Käse überhaupt.

Habe ich absichtlich verwendet keine styling-in diesem Beispiel zu vermeiden, dass die hinzugefügte Ebene. Die dump-Taste wird Ihnen sagen, was die drei überprüft Staaten sind, so verwenden Sie es, zu vernehmen, was passiert ist, nachdem Sie die radio-oder text-input-Elemente. Zum Beispiel ich der Einfachheit halber eine Globale zu erinnern, den früheren Zustand, aber eine elegantere Methode ist die Verwendung eines dataset, das ich das, was ich in den code meiner Anwendung.

<!DOCTYPE html>
<html>
<head>
  <title>Uncheck a radio button</title>
<script>
function attachEventListener(target, eventType, functionRef, capture) {
   "use strict";
   if (typeof target.addEventListener !== 'undefined') {
      //Most modern browsers
      target.addEventListener(eventType, functionRef, capture);
   } else if (typeof target.attachEvent !== 'undefined') {
      //IE
      target.attachEvent('on' + eventType, functionRef);
   } else {
      eventType = 'on' + eventType;
      if (typeof target[eventType] === 'function') {
         var oldListener = target[eventType];
         target[eventType] = function() {
            oldListener();
            return functionRef();
         };
      } else {
         target[eventType] = functionRef;
      }
   }
}
</script>
</head>

<body>
<form>
<input id="Cheddar-radio"  class="radio" type="radio" name="Cheeses-0" value="Cheddar Cheese"  tabindex="-1"></input>
<input id="Cheddar-text"                 type="text"  readonly         value="Cheddar Cheese"      tabindex="-1"></input><br>
<input id="Swiss-radio"    class="radio" type="radio" name="Cheeses-0" value="Swiss Cheese"    tabindex="-1"></input>
<input id="Swiss-text"                   type="text"  readonly         value="Swiss Cheese"    tabindex="-1"></input><br>
<input id="American-radio" class="radio" type="radio" name="Cheeses-0" value="American Cheese" tabindex="-1"></input>
<input id="American-text"                type="text"  readonly         value="American Cheese" tabindex="-1"></input><br><br>

<input onclick="dumpStates()" type="button" name="button" value="dump" tabindex="-1"></input>

</form>
<script>
window.onload = addRadioListeners;

function addRadioListeners() { //But do it on the -text elements.
   attachEventListener(document.getElementById('Cheddar-text') , 'mousedown', rememberCurrentState, false);
   attachEventListener(document.getElementById('Swiss-text')   , 'mousedown', rememberCurrentState, false);
   attachEventListener(document.getElementById('American-text'), 'mousedown', rememberCurrentState, false);

   attachEventListener(document.getElementById('Cheddar-text') , 'mouseup', checkNewState, false);
   attachEventListener(document.getElementById('Swiss-text')   , 'mouseup', checkNewState, false);
   attachEventListener(document.getElementById('American-text'), 'mouseup', checkNewState, false);
}

function dumpStates() {
   console.log(document.getElementById('Cheddar-radio').checked +
               ' ' + document.getElementById('Swiss-radio').checked +
               ' ' + document.getElementById('American-radio').checked);
}

var elementWasChecked; //Global - Could just as well use a dataset attribute
                       //on either the -radio or -text element and check it instead.

function rememberCurrentState(event) {
   var element;
   var radioElement;

   element = event.target;

   radioElement = document.getElementById(element.id.replace(/text/,'radio'));
   elementWasChecked = radioElement.checked;

   radioElement.checked = true;

}

function checkNewState(event) {
   var element;
   var radioElement;

   element = event.target;
   radioElement = document.getElementById(element.id.replace(/text/,'radio'));

   var currentState = radioElement.checked;

   if (elementWasChecked === true && currentState === true) {
      console.log('Changing ' + radioElement.id + ' to false.');
      radioElement.checked = false;
   }
};

</script>
</body>
</html>

Wenn Sie klicken Sie auf die radio-buttons Sie wie erwartet arbeiten. Wenn Sie klicken Sie auf die text-Elemente nebeneinander, Sie sind ein proxy für die radio-buttons mit einer Ausnahme. Wenn Sie auf ein text-Element hat eine zugehörige radio-button, der ist bereits überprüft, es wird deaktivieren Sie es. Daher ist der text-proxy s-Ereignis ausgelöst, und nicht die radio-buttons.

Den zusätzlichen Vorteil, dass Sie nun schlagen Sie den größeren text Ziel zu.

Wenn Sie wollen machen Sie es einfach und würde nicht dagegen, mit einem Doppelklick-Ereignis probieren Sie etwas wie dies:

<input name="options" type="radio" ondblclick="this.checked=false;">