JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image_box">
  <label>
    <input class="location_checkbox" type="checkbox" name="test" value="test001">
    <img class="thumbnail" src="http://placehold.it/50">
  </label>
  <label>
    <input class="location_checkbox" type="checkbox" name="test" value="test002">
    <img class="thumbnail" src="http://placehold.it/50">
  </label>
</div>

CSS

.image_box label {
	display: inline-block;
	min-height: 50px;
	min-width: 50px;
	position: relative;
}
/* チェックボックスの位置 */
.image_box .location_checkbox {
	position: absolute;
	top: 12px;
	right: 12px;
	transform: scale( 1 );
	cursor: pointer;
}
.image_box img.thumbnail {
	border: 4px solid rgba( 0, 0, 0, 0 );
	box-sizing: border-box;
}
/* チェックが入っていると枠を表示する */
.image_box .checked img.thumbnail {
	border-color: blue;
}

JavaScript

$(function() {
	$( '.image_box label' ).click( function() {
		var $this = $( this );
		if( $this.find( '.location_checkbox' ).prop( 'checked' ) ){
			$this.addClass( 'checked' );
		} else {
      $this.removeClass( 'checked' );

		}
	});
});