Radio-Button überprüft nicht registriert mit Änderung()

Question

Ich weiß, das ist eine häufige Frage, und ich verstehe, warum es nicht funktioniert. Problem ist, dass die vorgeschlagenen Antworten nicht für mich arbeiten.

HTML-Code:

<label class="radio"><img id="boyImg" class="radio-img btn-boy" src="/wp-content/uploads/2016/09/boy.png"><input type="radio" name="Gender" value="Boy"></label> 
<label class="radio"><img id="girlImg" class="radio-img btn-girl" src="/wp-content/uploads/2016/09/girl.png"><input type="radio" name="Gender" value="Girl"></label> 

Ich habe den folgenden Code:

$('input[type=radio]').on('change', function() { 
    $(this).closest("form").submit(); 
}); 

die zum ersten Mal wie erwartet funktioniert. Problem ist, dass wenn ich mit dem Radio-Button zurück auf die Seite navigiere. Es funktioniert nur, wenn ich ein anderes Optionsfeld anwähle - das selbe funktioniert nicht. Obwohl keine von ihnen ausgewählt sind, wenn Sie auf die Seite zurückkehren. Mit anderen Worten, ich kann z.B. Junge zweimal hintereinander, obwohl ich zwischen meinen Auswahlen zu einer anderen Seite navigiert bin.

Ich habe das folgende Update versucht:

$('input[type=radio]').on('change', function() { 
    if($('input[value="Boy"]').is(':checked') || $('input[value="Girl"]').is(':checked')){ 
     $(this).closest("form").submit(); 
    } 
}); 

Aber es immer noch funktioniert nur, wenn ich eine andere Option als meine ursprüngliche Wahl verwenden.

Was mache ich falsch?

Answer 1

Als Workaround können Sie click Ereignis verwenden. Es hat wahrscheinlich etwas mit der automatischen Vervollständigung des Browsers zu tun. Probieren Sie einen anderen Browser aus.

Answer 2

Das ist eine seltsame Browser-Eigenart, dass das ausgewählte Optionsfeld gespeichert, aber nicht wie ausgewählt angezeigt wird. Die einfachste Lösung für Ihre Zwecke wäre ein Klick.

$('input[type=radio]').on('change,click', function() { 
$(this).closest("form").submit(); 
});