Neste caso você deveria usar radio em vez de checkbox, porque ao contrário do checkbox, o radio só lhe permite escolher uma opção.
Crie um label
para cada imagem e adicione antes da tag img
um input do tipo radio:
<label>
<input type="radio" name="icones" value="valor 1">
<img src="caminho_da_imagem_1">
</label>
<label>
<input type="radio" name="icones" value="valor 2">
<img src="caminho_da_imagem_2">
</label>
Note que os radios devem possuir o mesmo name
, o que muda é só o value
de cada um. É esse value
que irá identificar qual imagem o usuário escolheu.
CSS
No CSS você irá ocultar o radio com opacity
, mas ao clicar na imagem, seu respectivo radio será checado mudando a cor da borda da imagem adjacente:
/* oculta o radio */
input[name=icones]{
position: absolute;
opacity: 0;
}
/* propriedades da imagem */
input[name=icones] + img{
cursor: pointer;
border: 4px solid #000;
}
/* altera a cor da borda */
input[name=icones]:checked + img{
border-color: #30F519;
}
Você pode enviar o valor do radio checado via formulário com POST para o PHP e pegar com $_POST['icones']
(onde icones
é o name
dos radios).
Exemplo: clique em uma imagem e depois clique no botão para exibir o valor de qual radio está checado:
function demo(){
var icones = document.querySelector("input[name=icones]:checked");
console.log("A imagem selecionada é a: " + icones.value);
}
input[name=icones]{
position: absolute;
opacity: 0;
}
input[name=icones] + img{
cursor: pointer;
border: 4px solid #000;
}
input[name=icones]:checked + img{
border-color: #30F519;
}
Selecione uma imagem:
<form method="post" action="pagina.php">
<div style="display: flex;">
<div>
<label>
<input type="radio" name="icones" value="1">
<img src="https://img.icons8.com/ultraviolet/2x/avatar.png">
</label>
</div>
<div>
<label>
<input type="radio" name="icones" value="2">
<img src="https://img.icons8.com/ultraviolet/2x/avatar.png">
</label>
</div>
<div>
<label>
<input type="radio" name="icones" value="3">
<img src="https://img.icons8.com/ultraviolet/2x/avatar.png">
</label>
</div>
</div>
</form>
<button onclick="demo()">Value da imagem selecionada</button>