1

inserir a descrição da imagem aqui

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)

5
  • Você quer em javascript puro ou jquery? Commented 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...
    – hugocsl
    Commented 2/05/2018 às 15:51
  • é verdade, dá pra fazer com css puro, é uma outra alternativa. usando efeito hover, active, focus... Commented 2/05/2018 às 15:54
  • Tudo depende do que vc quer fazer @RodrigoBarreto Commented 2/05/2018 às 15:56
  • 1

3 Respostas 3

3

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>

.

1

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>
1
  • 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
1

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 radios 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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .