Im trying to enable the user to only select one checkbox-CodePudding

In my code, when a checkbox is selected an image is displayed. But when i select another checkbox the first image does not disappear and another image comes out.

What i really want is if i select a checkbox the first time and an image is displayed, I want it to disappear when i select a different checkbox so that the image of that checkbox can take its place. Any insights will be appreciated. Here is my code:

<body>
<input type="checkbox" />
<img src="pics/35.jfif" > 
<input type="checkbox" />
<img src="pics/38.jfif" > 
</body>

<style>
img {
display: none
}

input {
height: 30px;
width: 30px;

}

input:checked img { display: block } `

CodePudding user response：

You need to use radio instead of checkbox like:

img {
  display: none
}

input {
  height: 30px;
  width: 30px;
}

input:checked img {
  display: block
}

<fieldset>
  <input type="radio" name="image" />
  <img src="https://via.placeholder.com/150">
  <input type="radio" name="image" />
  <img src="https://via.placeholder.com/300">
</fieldset>

Reference:

radio

CodePudding user response：

if you can add input id and add img class you can work. Simple version use it.

    <input type="checkbox" id="inpt_1"/>
    <img src="pics/35.jfif" > 
    <input type="checkbox" id="inpt_2"/>
    <img src="pics/38.jfif" > 
    
    
    
        img {
          display: none;
        }
    
        #inpt_1:checked   .img_1{
          display: block;
        }
        
        #inpt_2:checked   .img_2{
          display: block;
        }