How to make these radio buttons checkbox style, and change the value of a text depending on the choice?

Question

I need to put in my site as is in this image. I’ve done in HTML and CSS the square with the price.
I don’t know much about JS and I’m not getting to make the left squares.
By clicking on "No Visit/No Visit" it must change the value of the price. The buttons must behave like Radio (I can only choose one of them)

Answer 1

I understood that you would like to leave a checkbox with the functionality of a radio, but I advise the reverse, leave a radio with the appearance of checkbox

I built a solution using only css but it could be with js quietly.

The idea is to work with the property checked radio along with 'hidden' elements so we give a functionality similar to the desired.

*{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>

.

Answer 2

You can put the value inside a marker like "span", and give it an ID.

<div id="precificacao">
  <h3>R$ <span id="valor">870,00</span></h3>
</div>

Then you can use the JS function to change the SPAN value when a checkbox is selected:

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

You call a function with "onclick" in your checkbox.

<form>
  <input type="radio" name="cb1" onclick="troca1()">
  <input type="radio" name="cb1" onclick="troca2()">
</form>

Answer 3

You can do the fake checkbox with CSS using ::before and checking the radio checked with the pseudo-class :checked.

The part of changing the value in div you can use addEventListener when the radioare changed, passing the value (I don’t know how you’re getting the values, but it’s suggested).

Using the pseudo-element ::before you can build a box similar to a checkbox and create another class to build the signal.

Example:

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>