2016-05-15 13 views
3

Wenn ich diesen Code implementieren - der Name des Kontrollkästchens wird nicht im Browser neben dem Kontrollkästchen angezeigt - nur das Kontrollkästchen selbst. Was ist der Grund dafür? Benutze ich die Setattribute-Funktion falsch?JavaScript setattribute - Name und Wert funktionieren nicht

<script type="text/javascript"> 

    var x = document.createElement("INPUT"); 
    x.setAttribute("type", "checkbox"); 
    x.setAttribute("value", "car"); 
    x.setAttribute("name", "vehicle"); 
    document.body.appendChild(x); 

</script> 
+1

Der Code funktioniert gut: https://jsfiddle.net/ag663kw8/ 'Name' wird nicht den Text' Fahrzeug' neben Ihrem '' hinzufügen; das ist, was '

+0

Versuchen Sie ein Label hinzuzufügen? – Ygalbel

Antwort

3

Sie benötigen ein label Element hinzuzufügen:

var x = document.createElement("INPUT"); 
x.setAttribute("type", "checkbox"); 
x.setAttribute("value", "car"); 
x.setAttribute("name", "vehicle"); 
document.body.appendChild(x); 

var label = document.createElement("label"); 
label.textContent = "vehicle"; 
document.body.appendChild(label); 
+0

Ein [* label *] (http://w3c.github.io/html/sec-forms.html#the-label-element) ist mit einem Formularsteuerelement verknüpft, entweder durch Verwendung einer ID im Formularsteuerelement und eines *. für * -Attribut auf dem Etikett oder Umschließen des Etiketts um das Steuerelement. Wenn Sie das Label neben dem Steuerelement platzieren, entspricht dies nur einem Span- oder Klartextknoten. – RobG

1

Sie sollten eine Bezeichnung für das Kontrollkästchen erstellen, wie Sie Checkbox dynamisch erstellt und hängen Sie ihn an Körper

//create checkbox 
    var x = document.createElement("INPUT"); 
    x.setAttribute("type", "checkbox"); 
    x.setAttribute("value", "car"); 
    x.setAttribute("name", "vehicle"); 

    //create label 
    var y = document.createElement("label"); 
    y.innerHTML = "Here goes the text"; 

    //Append Them to body 
    document.body.appendChild(x); 
    document.body.appendChild(y); 
Verwandte Themen