I want when click on the img using JS, it will be selected and others will blur out. That what I'm expect :

Here the code for the HTML :

<section class="choice-grid">
        <div data-choice-id="blepping" data-question-id="one">
          <img src="images/blepdog.jpg"/>
          <img class="checkbox" src="images/unchecked.png"/>
        </div>

        <div data-choice-id="happy" data-question-id="one">
          <img src="./images/happydog.jpg"/>
          <img class="checkbox" src="images/unchecked.png"/>
        </div>

        <div data-choice-id="sleeping" data-question-id="one">
          <img src="./images/sleepingdog.jpg"/>
          <img class="checkbox" src="images/unchecked.png"/>
        </div>

        <div data-choice-id="dopey" data-question-id="one">
          <img src="./images/dopeydog.jpg"/>
          <img class="checkbox" src="images/unchecked.png"/>
        </div>

        <div data-choice-id="burger" data-question-id="one">
          <img src="./images/burgerdog.jpg"/>
          <img class="checkbox" src="images/unchecked.png"/>
        </div>
</section>

Im trying to use target event when click on the img. But I stuck right here and don't know how to change the attribute of that img tag in the target section.

Here what I'm stuck at :

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
  } 

var choice = document.querySelector('.choice-grid');
choice.onclick = function(event) {
    var target = getEventTarget(event);
    

    var test = target.attributes.src;
    // test
    // var test =target.lastChild.src
    alert(test);
}