The input radio will still be checked even though I click the radio again(CSS only)

I want to make a CSS that will change the style of input type=radio. However, when I click another radio, the first one will still looked like that it is checked.

Here is my code and I tried to make the code as short as I can:

input[class=b][type=radio]:checked::before {
  content: "";
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  border: 2px solid red;
  
}
input[class=b][type=radio]:not(checked)::before {
  content: "";
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  border: 2px solid;
  border-radius: 25px;
  background: blue;
}
input[class=b][type=radio]:not(checked)::after {
  content: "";
  display: block;
  visibility: hidden;
  position: relative;
}
input[class=b][type=radio]:checked::after {
  content: "";
  display: block;
  visibility: visible;
  width: 5px;
  height: 5px;
  border: solid 2px red;
  border-width: 5px 5px 5px 5px;
  background: red;
  border-radius: 25px;
  position: relative;
  transform: translateY(-15px)
}

HTML code:

<input type="radio" class="b" id="check1"><label for="check1">test</label>
<br>
<input type="radio" class="b" id="check2"><label for="check2">test2</label>
<p>They will both look like checked if you click each of them</p>

I wonder how to make it switch between checked and not checked by just using CSS. Also, I want the CSS event(such as :hover) of checked and not checked, because I want to change the style depending on its state.

>Solution :

The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.

[![View Code Image][1]][1]

<input type="radio" class="b" id="check1" name="test"><label for="check1">test</label>
<br>
<input type="radio" class="b" id="check2" name="test"><label for="check2">test2</label>
<p>They will both look like checked if you click each of them</p>


  [1]: https://i.stack.imgur.com/hpc3R.png