JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="cl" data-target="#icon01">
<label for="c1">check</label>
<input name="radioCancelable" type="radio" id="r1" data-target="#icon02">
<label for="r1">radio1</label>
<input name="radioCancelable" type="radio" id="r2" data-target="#icon03">
<label for="r2">radio2</label>

<a id="icon01" href="#hoge">
                      check1
                    </a>

<a id="icon02" href="#hoge">
                      radio1
                    </a>

<a id="icon03" href="#hoge">
                      radio2
                    </a>

CSS

.selected {
  color: red;
}

JavaScript

$(function() {
  var $check = $('input[type="checkbox"][data-target^="#icon"], input[type="radio"][data-target^="#icon"]')
  $check.on("click", function() {
    var $flag = ($(this).prop('checked')) ? 'addClass' : 'removeClass';
    console.log($(this).prop('checked'))
    $($(this).attr('data-target'))[$flag]('selected');
  });
});