JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="list-group">
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
</ul>

CSS

.list-group-item:hover {
  background: #eee;
}

.selector {
  width: 100%;
  background: red;
}

JavaScript

$(".list-group-item").click(function(event) {
  var target = $(event.target);
  if (target.is("input")) {
    $(this).trigger(click);
  } else {
    $(this).find(".chkbox").trigger("click");
  }
});