Custom radio button not getting checked on clicking - html

Question

I created a custom radio button using HTML and CSS
.radio {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-left: 10px;
}
.radio__input {
display: none;
}
.radio__radio {
width: 1.25em;
height: 1.25em;
border: 2px solid #87cac3;
border-radius: 50%;
margin-left: 10px;
box-sizing: border-box;
padding: 2px;
}
.radio__radio::after {
content: "";
width: 100%;
height: 100%;
display: block;
background: #87cac3;
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s;
}
.radio__input:checked+.radio__radio::after {
transform: scale(1)
}
<div>
<label for="myRadioId" class="radio">Agree</label>
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
<div class="radio__radio"></div>
</label>
</div>
The code doesn't seem to work accurately means, the radio button is not getting checked on clicking. I think the problem is with the .radio__radio::after inside it i have done trnsform: scale(0) so it should default change its scale to zero on refreshing the page and when checked it should change the scale to 1.

Answer 1

Use the following code, hope it will be helpful .
var val = 0;
$('input[name=myRadioField]').on("click", function(){
console.log(val);
if($(this).val()==val)
{$(this).prop('checked', false);
val = -1;
}
else val = $(this).val();
});
.radio {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-left: 10px;
}
.radio__input {
display: none;
}
.radio__radio {
width: 1.25em;
height: 1.25em;
border: 2px solid #87cac3;
border-radius: 50%;
margin-left: 10px;
box-sizing: border-box;
padding: 2px;
}
.radio__radio::after {
content: "";
width: 100%;
height: 100%;
display: block;
background: #87cac3;
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s;
}
.radio__input:checked+.radio__radio::after {
transform: scale(1)
}
.radio__input:unchecked+.radio__radio::after {
transform: scale(0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<label for="myRadioId" class="radio">Agree
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
<div class="radio__radio"></div>
</label>
</div>

Answer 2

Thanks everyone for your inputs.
The problem is solved I just added autocomplete= "off" inside <input> tag and it worked fine.
.container {
padding-top: 10px;
text-align: center;
}
.radio {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-left: 10px;
}
.radio__input {
display: none;
}
.radio__radio {
width: 1.25em;
height: 1.25em;
border: 2px solid #87cac3;
border-radius: 50%;
margin-left: 10px;
box-sizing: border-box;
padding: 2px;
padding-bottom: 2px;
}
.radio__radio::after {
content: "";
width: 100%;
height: 100%;
display: block;
background: #87cac3;
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s;
}
.radio__input:checked+.radio__radio::after {
transform: scale(1)
}
<div class="container">
<h1>Question 1</h1>
<h4>Agree
<label class="radio">
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="1">
<div class="radio__radio"></div>
</label>
<label class="radio">
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="2">
<div class="radio__radio"></div>
</label>
<label class="radio">
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="3">
<div class="radio__radio"></div>
</label>
<label class="radio">
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="4">
<div class="radio__radio"></div>
</label>
<label class="radio">
<input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="5">
<div class="radio__radio"></div>
</label> Disagree
</h4>
</div>