Why custom radio does not uncheck after clicking another radio button? - html

Question

I have two custom radio button , I have added a custom tick when clicked to be checked [tick], but when I clcik the second button the first radio button still checked .
here is jsfiddle: http://jsfiddle.net/03vwco7r/
here is html :
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</label>
</p>
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
<a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
{l s='Pay with PayU' mod='payu'}
</a>
</label>
</p>
Here is css
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-block;
cursor: pointer;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
position: relative;
border: 1px solid #000;
border-radius:50px;
width: 60px;
height: 60px;
margin:0;
}
input[type="radio"]:checked + label:before {
content: "✔";
font-family: 'lucida grande';
font-size: 45px;
line-height: 60px;
text-align: center;
}
I want whena user click the second button the first button sholud be automatically unchecked,
What am I doing wrong in my code?

Answer 1

Because they have same "id" and "for" ,You should change "id" and "for" in second radio style:
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</label>
</p>
<p class="payment_module">
<input id="session2" name="radio-group" type="radio" />
<label for="session2">
<img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
<a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
{l s='Pay with PayU' mod='payu'}
</a>
</label>
</p>
session1 ===> session2