Guten Abend zusammen.
ich habe jetzt ein Bestellformular erstellt und möchte nun wenn jemand auf eine checkbox klickt das ein preis angezeigt wird und wenn man weitere checkboxen drückt der preis immer weiter dazugerechnet wird.
Ich habe im Internet gesucht, aber nicht so viel gefunden was mir es alles verständlich rüberbringt.
Hier mein HTML & CSS:
HTML
<div id="bestellformular">
<div id="bestellformular-mover-in">
<p id="uberschrift">Was möchten sie bestellen?</p>
<form name="bestellform">
<label for="angebot1" >Bilder</label>
<input type="checkbox" id="angebot1" />
<br>
<label for="angebot2" >Videos</label>
<input type="checkbox" id="angebot2" />
<br>
<label for="angebot3">E-Book</label>
<input type="checkbox" id="angebot3" />
<br>
<label for="angebot4" >Buch</label>
<input type="checkbox" id="angebot4"/>
<button id="bestellbutton">Bestellen!</button>
</form>
<p>Es kostet:<span id="preis"></span></p>
</div>
<p>B<br>E<br>S<br>T<br>E<br>L<br>L<br>F
<br>O<br>R<br>M<br>U<br>L<br>A<br>R<br></p>
</div>CSS
/*Bestellformular*/
div#bestellformular
{
width: 50px;
height: 400px;
background-color: brown;
border: 2px solid cyan;
border-right: none;
float: right;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
clear: both;
}
div#bestellformular p
{
position: absolute;
right: 10px;
top: 160px;
font-weight: 900;
color: black;
}
#bestellformular div#bestellformular-mover-in
{
width: 200px;
height: 430px;
background-color: yellow;
position: relative;
right: 150px;
top: -5px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
z-index: 1;
}
div#bestellformular-mover-in p#uberschrift
{
position: absolute;
top: 10px;
left: 10px;
}
div#bestellformular-mover-in p
{
position: absolute;
top: 230px;
left: 10px;
}
div#bestellformular-mover-in p span
{
width: 100px;
height: 50px;
border: 2px solid black;
margin-left: 5px;
padding: 3px 4px 3px 4px;
}
div#bestellformular-mover-in label
{
position: relative;
top: 80px;
left: 40px;
display: block;
}
div#bestellformular-mover-in [type="checkbox"]
{
position: relative;
top: 65px;
left: 25px;
}
div#bestellformular-mover-in button
{
position: absolute;
top: 300px;
left: 20px;
padding: 10px;
border: 3px solid cyan;
}
/*Zeigen dieses Bereiches + hover-effekte*/
div#bestellformular-mover-in button:hover
{
background-color: rgba(0, 234, 255, 0.3);
cursor: pointer;
}
#bestellformular div#bestellformular-mover-in
{
display: none;
}
div#bestellformular:hover #bestellformular-mover-in
{
display: block;
}Hoffe ihr könnt mir dabei Helfen. Und falls ihr einen javascript-code bringt. Könnt ihr ihn bitte erklären.
Vielen Dank.
Gruß,
Stef