onclick Funktion zum Einfügen von Daten in Eingabefeld mit Toggle

Question

Ich möchte zwei Tasten mit einer onclick Funktion, die "männlich" oder "weiblich" in einen anderen Eingang einfügen bauen.

Die beiden Schaltflächen haben Hintergrundbilder und müssen die Hintergrundposition ändern, wenn sie angeklickt werden. Ich brauche beide Knöpfe um voneinander zu schalten.

Kann jemand eine Lösung mit Javascript oder Jquery vorschlagen?

<input type="button" class="gnM" onclick="???????"> 
<input type="button" class="gnF" onclick="???????"> 

<input class="req-string gender" id="gender" name="gender"> 

Answer 1

Wenn Sie dies mit onclick tun müssen, dann würde ich vorschlagen:

<input type="button" class="gnM" onclick="$('#gender').val($(this).val())" value="male" /> 
<input type="button" class="gnM" onclick="$('#gender').val($(this).val())" value="female" /> 

JS Fiddle demo.

ich stark von einem onclick zu einer jQuery unauffälligen Methode bewegen würde vorschlagen, mit der click() Methode:

​$('.gnM').click(
    function(){ 
     var that = $(this); 
     $('#gender').val(that.val()); 
     that.css('background-position','bottom right'); 
    });​​​​​​ 

JS Fiddle demo.

$('.gnM').click(
    function(){ 
     var that = $(this); 
     $('#gender').val(that.val()); 
     that.siblings().removeClass('active'); 
     that.toggleClass('active'); 
    });​ 

JS Fiddle demo:

für Hin- und Herschalten zu ermöglichen.

Oder prägnanter:

$('.gnM').click(
    function(){ 
     var that = $(this); 
     $('#gender').val(that.val()); 
     that.toggleClass('active').siblings().removeClass('active'); 
    });​ 

JS Fiddle demo.

Referenzen:

• click().
• css().
• removeClass().
• siblings().
• toggleClass().
• val().

Answer 2

http://jsfiddle.net/vFsXt/ Lösung jQuery verwenden, vermeiden, mit Inline-Attribut für js

Answer 3

eine CSS-Klasse erstellen (button-toggle-on), der die ein- und Hintergrund-Position für die Tasten gilt. Dann in der Taste onclick schalten Sie die Klasse auf der Schaltfläche. Damit dies funktioniert, muss man zunächst eingeschaltet werden.

<input type="button" class="gnM button-toggle-on" onclick="$('#gender').val('male'); $('.gnF, .gnM').toggleClass('button-toggle-on');" /> 
<input type="button" class="gnF" onclick="$('#gender').val('female'); $('.gnF, .gnM').toggleClass('button-toggle-on');" />