JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-1" name="filter" value="1" class="form-radio">
<label class="option" for="edit-filter-1">One</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-2" name="filter" value="2" class="form-radio">
<label class="option" for="edit-filter-2">Two</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-3" name="filter" value="3" class="form-radio">
<label class="option" for="edit-filter-3">Three</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-4" name="filter" value="4" class="form-radio" checked="checked">
<label class="option" for="edit-filter-4">Four</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-5" name="filter" value="5" class="form-radio" checked="checked">
<label class="option" for="edit-filter-5">Five</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-6" name="filter" value="6" class="form-radio" checked="checked">
<label class="option" for="edit-filter-6">Six</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-7" name="filter" value="7" class="form-radio">
<label class="option" for="edit-filter-7">Seven</label>
</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-8" name="filter" value="8" checked="checked" class="form-radio">
<label class="option" for="edit-filter-8">Eight</label>
</div>
</form>
CSS
.form-type-radio {
padding: 10px;
background: #ccc;
border: 1px solid #000;
}
JavaScript
$('div.form-type-radio').on('click', function () {
$(this).find(':radio').prop({checked: true});
});