JSFiddle - React, Tailwind, and code Playground

by MaartenB

HTML

<div id="cellA" class="cellContainer">
  Cell A
  <br /><br />
  <input type="checkbox" id="checkboxA">
</div>

<div id="cellB" class="cellContainer">
  Cell B
  <br /><br />
  <div id="checkboxB">Checkbox B</div>
</div>

CSS

.cellContainer {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

JavaScript

$('#cellA').on('click', function() {
        alert('Cell A');
        $('#checkboxA').trigger('click');
    });

    $('#checkboxA').on('click', function() {
        alert('Checkbox A');
    });

    $('#cellB').on('click', function() {
        alert('Cell B');
        $('#checkboxB').trigger('click');
    });

    $('#checkboxB').on('click', function() {
        alert('Checkbox B');
    });