JSFiddle - React, Tailwind, and code Playground

by mattopen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.5/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><input name="EngagementTypes[0].EngagementTypeId" 
      id="EngagementTypes_0__EngagementTypeId" 
      type="hidden" value="1" data-val-required="The Engagement field is required." 
      data-val="true" data-val-number="The field Engagement must be a number.">

    <span class="pull-left">
        <div class="engagement-type" data-checkbox="checked">
            <input name="EngagementTypes[0].IsSelected" 
              id="EngagementTypes_0__IsSelected" type="checkbox" value="true" 
              data-val-required="The IsSelected field is required." 
              data-val="true">
            <input name="EngagementTypes[0].IsSelected" type="hidden" value="false">
        </div>
    </span>
    Audit</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><input name="EngagementTypes[0].EngagementTypeId" 
      id="EngagementTypes_1__EngagementTypeId" 
      type="hidden" value="1" data-val-required="The Engagement field is required." 
      data-val="true" data-val-number="The field Engagement must be a number.">

    <span class="pull-left">
        <div class="engagement-type" data-checkbox="">
            <input name="EngagementTypes[0].IsSelected" 
              id="EngagementTypes_0__IsSelected" type="checkbox" value="true" 
              data-val-required="The IsSelected field is required." 
              data-val="true">
            <input name="EngagementTypes[0].IsSelected" type="hidden" value="false">
        </div>
    </span>
    Audit</td>
    ...

JavaScript

$('.engagement-type').on('click', function () {
    var engagementTypes = $('.engagement-type').parent().find('[data-checkbox="checked"]');
    console.log(engagementTypes);
    var engagementTypesChecked = $('.engagement-type').parent().find('input[type="checkbox"]:checked');
    console.log(engagementTypesChecked);
});