Selected picture and blurry others

Question

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);
}

Answer 1

[data-question-id] label input {
  display: none;
}

[data-question-id] label .photo {
  opacity: .5;
}

[data-question-id] label input:checked ~ .photo {
  opacity: 1;
}

[data-question-id] label input ~ .checked {
  display: none;
}

[data-question-id] label input:checked ~ .checked {
  display: inline;  
}

[data-question-id] label input:checked ~ .unchecked {
  display: none;
}

With basic CSS selectors you can toggle what is displayed and set the opacity of the image.

        <div data-choice-id="blepping" data-question-id="one">
          <label>
            <input type="checkbox"/>
            <img class="photo" src="http://placekitten.com/200/300"/>
            <img class="checkbox checked" src="images/unchecked.png" alt="checked"/>
            <img class="checkbox unchecked" src="images/checked.png" alt="unchecked"/>
          </label>
        </div>