Use checkbox to bring up image

Asked

Viewed 49 times

0

Good evening, I am very beginner in web development, I would like a help, I want to make 2 checkbox, in which, when the first is marked, appears the image1 , and when the second is marked, appear the imagem2.

  • Welcome Arthur, your question is very wide and information is missing, before asking a question take a look here: https://answall.com/help/how-to-ask. Based on the information on this link you can edit it, add your code and improve it.

  • Without code, all you’ll get are examples based on..... nothingness. It all depends on your layout, because maybe (probably) you even need Javascript for this.

1 answer

2


Guy basically you need to use the pseudo-class :checked of input and the adjacent selector + when to mark the checkbox show the image that comes next.

Here is a very basic example, I used the minimum CSS and HTML, for you to better understand how the dynamics of input:checked + img (the + causes the checked input to take only the image that comes next)

img {
    display: none;
}
input:checked + img {
    display: block
}
<input type="checkbox" name="" id="">1
<img src="https://placecage.com/100/100">
<input type="checkbox" name="" id="">2
<img src="https://placecage.com/101/101">

Here you can read about the pseudo-classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Here you can read more about the Selectors CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Seletores_CSS

  • sorry the way of asking the question, I know it was very generic, however, what I wanted was really what you did, mt thanks msm.

  • @Arthur this CSS base can help you in many ways, including for making hidden menus, collapses and accordions, up to slider da para fazer. If you think you have solved the question, remember to mark the icon below the arrows of my answer ;)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.