JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<ul>
  <li>
    <a href="javascript:;" class="option">
      <span class="label">Business</span>
      <input type="checkbox" class="toggle" value="isSelected">
    </a>
  </li>
  <li>
    <a href="javascript:;" class="option">
      <span class="label">Tech</span>
      <input type="checkbox" class="toggle" value="isSelected">
    </a>
  </li>
</ul>

CSS

ul>li {
  list-style: none;
}
a.option {
  background: darkcyan;
  color: white;
  display: block;
  width: 100px;
  padding: 10px;
  text-decoration: none;
  border-bottom: 1px solid white;
}
a.option input.toggle {
  float: right;
}

JavaScript

var $option = $('a.option');
$option.on('click', function(e) {
  var $target = $(e.target);
  var $this = $(this);
  if ($target.hasClass('toggle')) {
    // checkbox clicked.
    return;
  }
  var childToggle = $this.find('input.toggle').prop('checked');
  var label = $this.find('.label').text();
  if (childToggle) {
    alert('Page ' + label + ' clicked, WITH checkbox checked.');
  } else {
    alert('Page ' + label + ' clicked, WITHOUT checkbox checked.');
  }

});