Heute möchte ich euch etwas zeigen, das viele bereits aus den Online Shops kennen. Und zwar zeige ich dir, wie du es schaffst dass ein Element ausgeblendet ist und erst sichtbar wird, wenn man eine Checkbox aktiviert.
Dieser Effekt kann man sehr schön einsetzen, man kann nicht nur Texte sondern auch ganze Elemente ein und ausblenden, halt einfach alles was eine Unique ID hat.
Video
HTML
1
2
3
4
5
| <form>
<input type="checkbox" id="checkbx" onclick="checkMe()"> Bitte checken
<p id="msg">Sie haben die AGB akzeptiert</p>
</form> |
<form>
<input type="checkbox" id="checkbx" onclick="checkMe()"> Bitte checken
<p id="msg">Sie haben die AGB akzeptiert</p></form>
CSS
1
2
3
| #msg {
display: none;
} |
#msg {
display: none;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
function checkMe(){
var cb = document.getElementById("checkbx");
var meldung = document.getElementById("msg");
if(cb.checked == true){
meldung.style.display = "block";
} else {
meldung.style.display = "none";
}
}
</script> |
<script>function checkMe(){
var cb = document.getElementById("checkbx");
var meldung = document.getElementById("msg");
if(cb.checked == true){
meldung.style.display = "block";
} else {
meldung.style.display = "none";
}
}</script>
0 Kommentare