Ineedtoputonmysitejustasitisinthisimage.IalreadydidinHTMLandCSSthesquarewiththeprice.HomeIdonotknowmuchaboutJSandIcannotdothesquaresontheleft.HomeByclickingon"No Visit / With Visit" it must change the value of the price. The buttons should behave like Radio (I can only choose one of them)
I understood that you would like to leave a checkbox with the functionality of a radio, but I advise the converse, leave a radio with the appearance of checkbox
I built a solution using only css but could be with js quietly.
The idea is to work with the checked property of the radio together with 'hidden' elements so we give a similar functionality as 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>.
You can put the value inside a bullet 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 checkboxes.
<form>
<input type="radio" name="cb1" onclick="troca1()">
<input type="radio" name="cb1" onclick="troca2()">
</form>
You can do the part of the fake checkboxes with CSS using ::before and checking the% checked_with
pseudo-class radio . >
The part of changing the value in :checked you can use div when addEventListener s changes, passing radio (I do not know how you are getting the values, / p>
Using the value pseudo-element you can build a box similar to a ::before and create another class to construct the sign ✓.
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: '13';
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>