Radio button not staying checked when I click another components

I wrote the code HTML like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<input class="add_task_radio" type="radio" name="prior" id="prior-2" value="2">
<label class="add_task_radio_icon" name="prior" for="prior-2" tabindex="1">
<i class="bi bi-check-circle text-light yellow"></i>
<i class="bi bi-circle text-light yellow"></i>
</label>
<input class="add_task_radio" type="radio" name="prior" id="prior-2" value="2">
<label class="add_task_radio_icon" name="prior" for="prior-2" tabindex="1">
<i class="bi bi-check-circle text-light yellow"></i>
<i class="bi bi-circle text-light yellow"></i>
</label>
<input type="text" name="task_name" placeholder="Name">

And CSS like this:

.add_task_radio {
    position:relative;
    display: none;
}
.button_space .bi-check-circle,.add_task_container .bi-check-circle,.add_task_radio_icon .bi-check-circle {
    display:none;
}
.button_space:hover .bi-check-circle,
.add_task_radio_icon:hover .bi-check-circle,
.add_task_radio_icon:active .bi-check-circle,
.add_task_radio_icon:checked .bi-check-circle,
.add_task_radio_icon:focus .bi-check-circle {
    display:inline;
}
.button_space:hover .bi-circle,
.add_task_radio_icon:hover .bi-circle,
.add_task_radio_icon:active .bi-circle,
.add_task_radio_icon:checked .bi-circle,
.add_task_radio_icon:focus .bi-circle {
    display:none;
}

Changing radio labels works fine. The problem is that the checked radio label is unchecked when I try to fill input name or click somewhere else. How to handle this?

You need to sign in to view this answers

Related Post