Radio Buttons - Auswahl löschen

Schraubendreher · 22.01.2012, 18:51

Hallo,

ich hänge seit einiger Zeit an einer (hoffentlich) Kleinigkeit. Ich würde gerne per Klick Radio Buttons zurücksetzen, falls eine Auswahl getroffen wurde. Leider klappt mein Code nicht. Folgendes habe ich versucht:

PHP-Code:

  <!-- #1 -->

<input type="radio" name="gender" value="1"> Weiblich | <input type="radio" name="gender" value="2"> Männlich

<br />

<a href="#" onclick="document.getElementsByName('gender').checked=false;">Reset</a>

 
 
<!-- #2 -->

<input type="radio" name="gender" value="1"> Weiblich | <input type="radio" name="gender" value="2"> Männlich

<br />

<a href="#" onclick="document.getElementsByName('gender')[0][1].checked=false;">Reset</a>

"getElementsByID" scheint auch keine Lösung zu sein, da man eine ID m.W. nur einmal vergen darf. Kann mir jemand auf die Sprünge helfen?

Vielen Dank, Schraubendreher!

Wolla · 22.01.2012, 20:14

Was meinst du mit zurücksetzen? Du willst, dass keiner der Radiobuttons mehr aktiv ist? Und was willst du damit erreichen? Wenn du die dritte Option brauchst (=unerheblich) dann bau doch einfach eine dritte Option ein.

Schraubendreher · 22.01.2012, 20:43

Ja genau, ich will, dass kein Radio-Button mehr aktiv ist. Das Geschlecht ist eine freiwillige Angabe, die man auch wieder löschen kann.

nikosch · 22.01.2012, 20:46

Dann mach ne dritte Auswahl. Naives HTML bietet diese Möglichkeit nicht. Und gebnau genommen stellt keine Auswahl einen undefinierten Zustand dar.

Schraubendreher · 22.01.2012, 20:56

Bei Klick auf den "Edit Profil" Button (type="submit") lösche ich erstmal den Eintrag aus der "Gender"-Tabelle und schreibe ihn neu, wenn eine Auswahl getroffen wurde. So habe ich das auch schon mit Checkboxen gemacht.

Ich habe diese Möglichkeit mit "Reset" in einem amerikanischem Shop gesehen und optisch gefällt mir diese Lösung viel besser als eine dritte Auswahl.

Edit:

Ich habe mein Problem nun mit einer Drop Down Box gelöst. Gefällt mir besser als Radio-Buttons mit drei Auswahlmöglichkeiten.

PHP-Code:

  <select name="gender">

 <option value="">Keine Angabe</option>

 <option value="1">Weiblich</option>

 <option value="2">Männlich</option>

</select>

rudygotya · 23.01.2012, 00:17

jquery (geht in jedem browser) - aber musst eben das framework einbinden:

PHP-Code:

  <input type="radio" class="gender" name="gender" value="1">  Weiblich | <input type="radio" class="gender" name="gender"  value="2"> Männlich
<a href="javascript:;" id="my_reset">Reset</a>
<script>
$(function () {
    $('#my_reset'). click(function () {
        $('.gender').prop('checked', false );
    });
});
</script>

pures Javascript - addEvent function :

PHP-Code:

  var addEvent = (function () {
   var filter = function(el, type, fn) {
      for ( var i = 0, len = el.length; i < len; i++ ) {
         addEvent(el[i], type, fn);
      }
   };
   if ( document.addEventListener ) {
      return function (el, type, fn) {
         if ( el && el.nodeName || el === window ) {
            el.addEventListener(type, fn, false);
         } else if (el && el.length) {
            filter(el, type, fn);
         }
      };
   }
 
   return function (el, type, fn) {
      if ( el && el.nodeName || el === window ) {
         el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if ( el && el.length ) {
         filter(el, type, fn);
      }
   };
})();

modernes js:

PHP-Code:

  <input type="radio" class="gender" name="gender" value="1"> Weiblich | <input type="radio" class="gender" name="gender" value="2"> Männlich
<a href="javascript:;" id="my_reset">Reset</a>
<script>

document.addEventListener('DOMContentLoaded', function() {
    var $ = function(el) {
       return document.querySelectorAll(el);
    };
    addEvent($('#my_reset'), 'click', function () {
        [].forEach.call( $('.gender'), function ( el ) {
            el.checked = false;
        });
    });
});
</script>

alte browser:

PHP-Code:

  <input type="radio" class="gender" name="gender" value="1"> Weiblich | <input type="radio" class="gender" name="gender" value="2"> Männlich
<a href="javascript:;" id="my_reset">Reset</a>
<script>
// vorsicht, so überschreibst du alle anderen onload funktionen
window.onload = function () {
    addEvent(document.getElementById('my_reset'), 'click', function () {
        var elements= document.getElementsByName('gender'),
            i;
        for( i in elements ) {
            if( elements.hasOwnProperty( i ) ) {
                elements[i].checked = false;
            }
        }
    });
};
</script>

edith: absolut ungetestet

Grüße

Solu · 23.01.2012, 06:18

Kann das Problem nicht einfach mit input type="reset" gelöst werden?

zorndyuke · 23.01.2012, 08:32

Zitat:

Zitat von Solu

Kann das Problem nicht einfach mit input type="reset" gelöst werden?

Klingt "machbar", aber sagen wir du hast 100 andere Felder ausgefüllt, dann willst du den "Reset"-Button nicht mal sehen!

Es stinkt mich schon an, wenn eine Captcha Abfrage vorhanden ist, welche nach " =\F7!T«œ " abfragt oder ein fetter schwarzer Balken oder Passwort falsch eingegeben und man muss wirklich ALLES neu eingeben.. das ist echt ätzend.

Zum Thema:

Ich wär auch entweder für eine dritte Wahl oder wie du es gelöst hast: Einfach eine andere Ausgabe Methode wählen. Dropdown-Menu klingt schon mal Fett. Nice.

nikosch · 23.01.2012, 17:54

Zitat:

Kann das Problem nicht einfach mit input type="reset" gelöst werden?

Nein, kann es nicht. Reset setzt Feldeingaben zurück (reset) auf die Voreinstellungen, nicht auf leer.

Manko10 · 23.01.2012, 18:07

Zitat:

Klingt "machbar", aber sagen wir du hast 100 andere Felder ausgefüllt, dann willst du den "Reset"-Button nicht mal sehen!

Word! type="reset" gehört in die Mottenkiste mit der dicken fetten Aufschrift "Defective-by-Design".

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Daten in Tabelle löschen nach Auswahl durch Radio Button	dizzy	Datenbanken	7	04.12.2010 02:37
Radio Buttons per Variable vordefinieren	FixiFoxi85	PHP Tipps 2010	3	02.02.2010 18:35
Radio Buttons nach [zurück] nicht mehr markiert	Destruction	PHP Tipps 2009	4	24.05.2009 14:39
[Erledigt] Problem bei checked Anweisung mit radio Buttons	litterauspirna	PHP Tipps 2008	5	28.09.2008 18:39
[Erledigt] Datensätze löschen nach Auswahl aus Formular (checkboxen)	asyoulikeit	Datenbanken	3	13.06.2008 15:56
radio buttons als weiterleitung zu einer seite	djrace	HTML, Usability und Barrierefreiheit	0	05.08.2005 15:25
radio buttons als weiterleitung zu einer seite	djrace	HTML, Usability und Barrierefreiheit	0	05.08.2005 14:08
radio buttons als weiterleitung zu einer seite	djrace	HTML, Usability und Barrierefreiheit	0	05.08.2005 13:39
radio buttons als weiterleitung zu einer seite	djrace	HTML, Usability und Barrierefreiheit	0	05.08.2005 13:35
radio buttons mit php und mysql		PHP Tipps 2005-2	5	09.06.2005 14:30
Auswahl bei Radio Formularfelder		PHP Tipps 2005	2	10.02.2005 10:22
radio buttons		PHP Tipps 2005	6	08.01.2005 02:21
radio buttons bleiben nicht markiert		PHP Tipps 2004	5	09.07.2004 10:44
Smarty Templates + Radio Buttons + Auswertung	Transmitter	PHP-Fortgeschrittene	0	05.07.2004 18:29

22.01.2012, 18:51
Schraubendreher Neuer Benutzer Registriert seit: 11.02.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Radio Buttons - Auswahl löschen Hallo, ich hänge seit einiger Zeit an einer (hoffentlich) Kleinigkeit. Ich würde gerne per Klick Radio Buttons zurücksetzen, falls eine Auswahl getroffen wurde. Leider klappt mein Code nicht. Folgendes habe ich versucht: PHP-Code: `<!-- #1 --> <input type="radio" name="gender" value="1"> Weiblich \| <input type="radio" name="gender" value="2"> Männlich <br /> <a href="#" onclick="document.getElementsByName('gender').checked=false;">Reset</a> <!-- #2 --> <input type="radio" name="gender" value="1"> Weiblich \| <input type="radio" name="gender" value="2"> Männlich <br /> <a href="#" onclick="document.getElementsByName('gender')[0][1].checked=false;">Reset</a>` "getElementsByID" scheint auch keine Lösung zu sein, da man eine ID m.W. nur einmal vergen darf. Kann mir jemand auf die Sprünge helfen? Vielen Dank, Schraubendreher!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

22.01.2012, 20:14
Wolla Moderator Registriert seit: 06.06.2008 Beiträge: 4.945 PHP-Kenntnisse: Fortgeschritten	Was meinst du mit zurücksetzen? Du willst, dass keiner der Radiobuttons mehr aktiv ist? Und was willst du damit erreichen? Wenn du die dritte Option brauchst (=unerheblich) dann bau doch einfach eine dritte Option ein. __________________ Warum denkt mein Hund eigentlich immer dann, wenn es an der Tür klingelt, es sei für ihn?

22.01.2012, 20:43
Schraubendreher Neuer Benutzer Registriert seit: 11.02.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Ja genau, ich will, dass kein Radio-Button mehr aktiv ist. Das Geschlecht ist eine freiwillige Angabe, die man auch wieder löschen kann.

22.01.2012, 20:46
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Dann mach ne dritte Auswahl. Naives HTML bietet diese Möglichkeit nicht. Und gebnau genommen stellt keine Auswahl einen undefinierten Zustand dar. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

22.01.2012, 20:56
Schraubendreher Neuer Benutzer Registriert seit: 11.02.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Bei Klick auf den "Edit Profil" Button (type="submit") lösche ich erstmal den Eintrag aus der "Gender"-Tabelle und schreibe ihn neu, wenn eine Auswahl getroffen wurde. So habe ich das auch schon mit Checkboxen gemacht. Ich habe diese Möglichkeit mit "Reset" in einem amerikanischem Shop gesehen und optisch gefällt mir diese Lösung viel besser als eine dritte Auswahl. Edit: Ich habe mein Problem nun mit einer Drop Down Box gelöst. Gefällt mir besser als Radio-Buttons mit drei Auswahlmöglichkeiten. PHP-Code: `<select name="gender"> <option value="">Keine Angabe</option> <option value="1">Weiblich</option> <option value="2">Männlich</option> </select>` Geändert von Schraubendreher (22.01.2012 um 23:55 Uhr).

23.01.2012, 00:17
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	jquery (geht in jedem browser) - aber musst eben das framework einbinden: PHP-Code: `<input type="radio" class="gender" name="gender" value="1"> Weiblich \| <input type="radio" class="gender" name="gender" value="2"> Männlich <a href="javascript:;" id="my_reset">Reset</a> <script> $(function () { $('#my_reset'). click(function () { $('.gender').prop('checked', false ); }); }); </script>` pures Javascript - addEvent function : PHP-Code: var addEvent = (function () { var filter = function(el, type, fn) { for ( var i = 0, len = el.length; i < len; i++ ) { addEvent(el[i], type, fn); } }; if ( document.addEventListener ) { return function (el, type, fn) { if ( el && el.nodeName \|\| el === window ) { el.addEventListener(type, fn, false); } else if (el && el.length) { filter(el, type, fn); } }; } return function (el, type, fn) { if ( el && el.nodeName \|\| el === window ) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } else if ( el && el.length ) { filter(el, type, fn); } }; })(); modernes js: PHP-Code: <input type="radio" class="gender" name="gender" value="1"> Weiblich \| <input type="radio" class="gender" name="gender" value="2"> Männlich <a href="javascript:;" id="my_reset">Reset</a> <script> document.addEventListener('DOMContentLoaded', function() { var $ = function(el) { return document.querySelectorAll(el); }; addEvent($('#my_reset'), 'click', function () { [].forEach.call( $('.gender'), function ( el ) { el.checked = false; }); }); }); </script> alte browser: PHP-Code: <input type="radio" class="gender" name="gender" value="1"> Weiblich \| <input type="radio" class="gender" name="gender" value="2"> Männlich <a href="javascript:;" id="my_reset">Reset</a> <script> // vorsicht, so überschreibst du alle anderen onload funktionen window.onload = function () { addEvent(document.getElementById('my_reset'), 'click', function () { var elements= document.getElementsByName('gender'), i; for( i in elements ) { if( elements.hasOwnProperty( i ) ) { elements[i].checked = false; } } }); }; </script> edith: absolut ungetestet Grüße __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

23.01.2012, 06:18
Solu Erfahrener Benutzer Registriert seit: 10.11.2011 Beiträge: 268 PHP-Kenntnisse: Fortgeschritten	Kann das Problem nicht einfach mit input type="reset" gelöst werden?