HTML/CSS ラジオボタンクリック時、画像を変更したい

現在、
ラジオボタンとラベルを使って、
見た目上画像をクリックすると画像のボタンを選択できるようにしてます。

<div class="selection-group">
  <input id="a" type="radio" name="rate" value="a">
  <label for="a">
    <img src="/test1.img">
  </label>

  <input id="b" type="radio" name="rate" value="b">
  <label for="b">
    <img src="test2.img">
  </label>

  <input id="c" type="radio" name="rate" value="c">
  <label for="c">
    <img src="test3.img">
  </label>
</div>

イメージ↓

やりたいこと

これを数行分用意してあって、
一行につき、ひとつのボタンしか選択できなくしてます。

私がやりたいことは、画像をクリック時に
画像の色を本当は変更したいのですが
（cssでfilterというのを使えばできるのですがブラウザによって反映されないので使えない）
それにあたり、画像を丸ごとクリック時に違う画像にかえたいと思っています。
クリック時に3つの画像それぞれ違う画像に変えたいです。

やってみたこと

inputのラジオボタンにjavasriptのonclickイベントを作って
以下のようにjavascriptを作成しましたが
これだと１行のなかのボタン３つともクリックしたときに、すべて変更されてしまいました。
（あくまで一つしか選択できなくしたい）


function radioClickA(){
    document.getElementById("imgA").src="/img/imgA.png";
}
function radioClickB(){
    document.getElementById("imgB").src="/img/imgB.png";
}
function radioClickC(){
    document.getElementById("imgC").src="/img/imgC.png";
}

ご教示いただけますと幸いです。
宜しくお願いいたします。