Wie kann ich Standard und ändern Preis mit Kontrollkästchen?

Question

Ich versuche, eine Schnittstelle einer Website zu erstellen, die einen unterschiedlichen Preis abhängig davon hat, ob Kontrollkästchen aktiviert sind und einen Standardwert haben, wenn keiner ausgewählt ist.

Der variierende Wert ist in einer Tabelle mit der ID 'Level1Price', die ich standardmäßig auf einen Wert von £ 5.11 'setzen möchte, wenn keines der beiden Kontrollkästchen aktiviert ist und der Wert für eins oder beide ausgewählt sind und wo die zwei Chekc-Boxen für sich jeweils einen anderen Wert haben.

Die beiden Kontrollkästchen haben die IDs "Partner" und "Kinder". Wenn keine Kontrollkästchen aktiviert werden (für die Zwecke dieser demon) den Wert von ‚sollte Level1Price in der Tabelle 5.

werden, wenn nur die‚Partner Level1Price ‚‘ Checkbox den Wert geprüft‘ist 10.

Wenn nur das Kontrollkästchen ‚Kinder‘, um den Wert von ‚Level1Price‘ geprüft ist 12.

Wenn beide Kontrollkästchen den Wert von ‚Level1Price‘ geprüft werden, ist 20.

var partner = document.getElementById("partner"); 
var children = document.getElementById("children"); 
function calc() 

if (!partner.checked && !children.checked) 

{ 
    document.getElementById('Level1Price')element.innerHTML = 5; 


} else if (partner.checked && !children.checked) 

{ 

document.getElementById('Level1Price')element.innerHTML = 10; 


} else if (!partner.checked && children.checked) 

{  
    document.getElementById('Level1Price')element.innerHTML = 12; 


} else if (partner.checked && children.checked) 

{ 

    document.getElementById('Level1Price')element.innerHTML = 20; 

} 

Dies ist der Code, dass ich Der Gedanke würde funktionieren und ich kämpfe. Ich entschuldige mich, wenn ich Anfängerfehler gemacht habe, bin ich noch recht neu und konnte nirgendwo eine funktionierende Lösung finden.

Vielen Dank im Voraus.

Dies sind die chekcboxes, die ich helfen möchte, das vale in der Tabelle zu ändern.

<div class="addition"> 
<label for="partner">+ Partner:</label> 
<input type="checkbox" name="partner" id="partner" value="partner" required> 
</div> 

<div class="addition"> 
<label for="children">+ Children:</label> 
<input type="checkbox" name="children" id="children" value="children" required> 
</div> 
</div> 

die Tabellendaten Dies ich

<tr> 
    <td scope=col id="Level1Price" value="5.11"> <b></b> <br/> per month</td> 
    <td scope=col id="Level2Price" value="9.97"> <b></b> <br/> per month</td> 
    <td scope=col id="Level3Price" value="14.06"> <b></b> <br/> per month</td> 
    </tr> 

Ist es möglich, automatisch aktualisiert werden, ohne die Notwendigkeit einer ‚berechnen‘ -Button zu füllen in der Lage sein?

Answer 1

Sofern Ihre HTML wie folgt aussieht:

<span id="Level1Price"></span> 

dann:

document.getElementById('Level1Price').innerHTML = 20; 

in Ihrem HTML-Wesen führen wird:

<span id="Level1Price">20</span> 

Grundsätzlich Sie nur eine Syntax Problem haben (Entfernen der fehlerhafter "Element" -Text).

Answer 2

In Ihrem Code ist ein kleiner Syntaxfehler aufgetreten. Zum besseren Verständnis habe ich einen voll funktionsfähigen Code an Ihre Anforderungen angehängt.

Bitte beziehen Sie sich auf den folgenden Code.

var partner = document.getElementById("partner"); 
 
var children = document.getElementById("children"); 
 

 
function calc() { 
 
    var val = 5; 
 
    if (partner.checked && !children.checked) { 
 
    val = 10; 
 
    } else if (!partner.checked && children.checked) { 
 
    val = 12; 
 
    } else if (partner.checked && children.checked) { 
 
    val = 20; 
 
    } 
 

 
    document.getElementById('Level1Price').innerHTML = val; 
 
}

Partner: <input type="checkbox" id="partner" /> <br /> Children: <input type="checkbox" id="children" /> <br /> Level1 Price: 
 
<span id="Level1Price"></span> 
 
<br /> 
 
<button onClick="calc()">Calculate</button>

Wenn Sie noch irgendeine Frage finden oder ein Zweifel frei zu äußern haben das Gefühl, werde ich meine Antwort aktualisieren. TIA