Ich habe ein HTML-Formular mit Optionsfeldern und einem Textfeld für einige von ihnen. Wenn Sie ein Textfeld ausfüllen, möchte ich, dass das entsprechende Optionsfeld aktiviert wird.
Ich nehme an, es ist mit Javascript möglich. Kann mir jemand helfen?
Vielen Dank!
3 Antworten
Hier erfahren Sie, wie Sie dies ohne Abfrage tun können. Dadurch wird auch das Optionsfeld deaktiviert, wenn die Eingabe leer ist.
var inputs = document.querySelectorAll('input[type="text"]');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
if (this.value == "") {
this.nextElementSibling.checked = false;
} else {
this.nextElementSibling.checked = true;
}
});
}<input type="text">
<input type="radio">
<input type="text">
<input type="radio">Wenn Sie die Optionsfelder vor den Textfeldern haben, ändern Sie einfach nextElementSibling in previousElementSibling.
Erklärung:
document.querySelectorAll('input[type="text"]') gibt ein Array von DOM-Elementen zurück, die jedes Ihrer Eingabetextfelder darstellen.
Dann wird eine for Schleife verwendet, um jedes Textfeld zu durchlaufen.
Für jedes Textfeld wird ein Ereignis-Listener hinzugefügt, der die definierte Funktion aufruft, wenn der Benutzer das input im Textfeld ändert. Verwenden Sie hier nicht change, da dies das Ereignis nur auslösen würde, wenn der Fokus das Textfeld verlässt (dh wenn der Benutzer außerhalb des Textfelds klickt).
Im Ereignis-Listener können wir mit this auf das aktuelle Textfeld verweisen.
Mit this.nextElementSibling können wir einen Verweis auf das Optionsfeld neben dem aktuellen Textfeld erhalten. Der Versuch, this.nextSibling zu verwenden, funktioniert nicht, da ein Knoten gefunden wird, der den tatsächlichen Text in Ihrem Eingabefeld enthält.
Die Anweisung if prüft, ob das aktuelle Textfeld leer ist. Wenn es leer ist, wird das Attribut checked des entsprechenden Optionsfelds auf false gesetzt. Wenn es nicht leer ist, wird checked auf true gesetzt.
Sie können .on('input' ... verwenden
Bitte überprüfen Sie das Snippet.
$('.container').on('input' , 'input[type=text]',function(e){
var that = $(this);
that.prev().prop({'checked':that.val().length>0});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<div><input type=radio /><input type=text></div>
<div><input type=radio /><input type=text></div>
<div><input type=radio /><input type=text></div>
<div><input type=radio /><input type=text></div>
<div><input type=radio /><input type=text></div>
</div>Ich bin mir nicht sicher, ob Sie jquery auf der Seite haben, aber mit jQuery könnten Sie verwenden
$('#idOfTextbox').on('input propertychange paste', function() {
$('#idOfCheckbox').attr('checked', true);
});