Preciso colocar no meu site igual está nessa imagem.Já fiz em HTML e CSS o quadrado com o preço.
Não sei muito de JS e não estou conseguindo fazer os quadrados da esquerda.
Ao clicar no "Sem Visita/ Com Visita" ele deve alterar o valor do preço.
Os botões devem se comportar como Radio (só posso escolher um deles)
-
Você quer em javascript puro ou jquery?– Ivan FerrerCommented 2/05/2018 às 15:50
-
Não precisa de Script pra isso, da pra fazer só com CSS se quiser... Mas antes de mais nada Coloque o que vc já tem de código Rodrigo, edite a sua pergunta e coloque o HTML e CSS etc...– hugocslCommented 2/05/2018 às 15:51
-
é verdade, dá pra fazer com css puro, é uma outra alternativa. usando efeito hover, active, focus...– Ivan FerrerCommented 2/05/2018 às 15:54
-
Tudo depende do que vc quer fazer @RodrigoBarreto– Ivan FerrerCommented 2/05/2018 às 15:56
-
1Ler também Qual é o impacto de se alterar o comportamento padrão de um elemento HTML?– WossCommented 2/05/2018 às 16:16
3 Respostas
Entendi que você gostaria de deixar um checkbox com a funcionalidade de um radio, mas eu aconselho o inverso, deixar um radio com a aparência de checkbox
Construí uma solução usando apenas css mas poderia ser com js tranquilamente.
A ideia é trabalhar com a propriedade checked
do radio junto com elementos 'escondidos' assim damos um funcionalidade semelhante a desejada.
*{box-sizing: border-box; font-family: sans-serif}
.group-radio {
display: block;
padding: 10px;
position: relative;
}
.group-radio input[type='radio'] {
display: none;
}
.group-radio input[type='radio']:checked + label::before{
color: #8e44ad;
content: "✓";
font-size: 30px;
font-weight: bold;
line-height: 10px;
}
.group-radio input[type='radio']:checked ~ .group-radio-message {
opacity: 1;
}
.group-radio label, .group-radio label::before{
cursor: pointer;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.group-radio label::before {
border-radius: 5px;
border: 1px solid #333;
content: '';
height: 20px;
width: 20px;
}
.group-radio-message {
background-color: rgba(155, 89, 182, .5);
border-radius: 5px;
box-shadow: 0px 0px 1px #000;
margin-left: 20px;
padding: 20px 30px;
position: absolute;
opacity: 0;
transition: all .3s;
}
.group-radio-message > b{
display: block;
font-size: 30px;
text-align: center;
}
<div class="group-radio">
<input id="sem" type="radio" name="radio" value="sem" checked>
<label for="sem">Sem visita</label>
<span class="group-radio-message">
<b>R$ 870,00</b>
<P>ou <b>10X</b> de <b>R$ 87,00</b> <br> sem juros no cartão</P>
</span>
</div>
<div class="group-radio">
<input id="com" type="radio" name="radio">
<label for="com">Com visita</label>
<span class="group-radio-message">
<b>R$ 900,00</b>
<P>ou <b>10X</b> de <b>R$ 90,00</b> <br> sem juros no cartão</P>
</span>
</div>
.
Você pode colocar o valor dentro de um marcador como "span", e dar a ele uma ID.
<div id="precificacao">
<h3>R$ <span id="valor">870,00</span></h3>
</div>
Depois pode utilizar a função em JS para alterar o valor do SPAN quando um checkbox é selecionado:
<script type="text/javascript">
function troca1(){
var valor = document.getElementById('valor');
valor.innerHTML = '870,00';
};
function troca2(){
var valor = document.getElementById('valor');
valor.innerHTML = '970,00';
};
</script>
Você chamar uma função com "onclick" no seus checkbox.
<form>
<input type="radio" name="cb1" onclick="troca1()">
<input type="radio" name="cb1" onclick="troca2()">
</form>
-
Resolveu perfeitamente a parte de mudar o valor do texto, Obrigado, agora só falta fazer o checkbox como está na imagem. Commented 2/05/2018 às 16:36
Você pode fazer a parte dos checkbox falsos com CSS usando ::before
e verificando o radio
checado com a pseudo-classe :checked
.
A parte de alterar o valor na div
você pode usar addEventListener
quando os radio
s forem alterados, passando o value
(não sei como você está pegando os valores, mas fica a sugestão).
Usando o pseudo-elemento ::before
você pode construir uma caixa semelhante a um checkbox
e criar uma outra classe para construir o sinal ✓.
Exemplo:
document.addEventListener("DOMContentLoaded", function(){
var opts = document.body.querySelectorAll(".opcao");
for(var x=0; x<opts.length; x++){
opts[x].addEventListener("click", function(){
document.body.querySelector("#valor").textContent = "R$"+this.value;
});
}
opts[0].click();
});
input{
position: relative;
margin-right: 15px;
}
.opcao::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 2px solid #000;
border-radius: 7px;
background: #fff;
}
.opcao:checked::after{
content: '\2713';
color: #7329a7;
font-size: 34px;
font-weight: bold;
position: absolute;
top: -17px;
left: 2px;
}
<input id="comvisita" class="opcao" type="radio" name="nome" value="870.00" checked>
<label for="comvisita">SEM VISITA</label>
<br><br>
<input id="semvisita" class="opcao" type="radio" name="nome" value="970.00">
<label for="semvisita">COM VISITA*</label>
<br>
<br>
<div id="valor">
</div>