JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<table class="product-list">
  <tr>
    <th class="heading" scope="col">Heading 1</th>
    <th class="opt" scope="col">Subscribe</th>
    <th class="opt" scope="col">Unsubscribe</th>
  </tr>
  <tr>
    <th scope="row">Product 1</th>
    <td class="btn opt-in"><label>
        <input name="radio1" type="radio" value=
        "radio1">
      </label></td>
    <td class="btn opt-out"><label>
        <input name="radio1" type="radio" value=
        "radio2">
      </label></td>
  </tr>
  <tr>
    <th scope="row">Product 2</th>
    <td class="btn opt-in"><label>
        <input name="radio2" type="radio" value=
        "radio3">
      </label></td>
    <td class="btn opt-out"><label>
        <input name="radio2" type="radio" value=
        "radio4">
      </label></td>
  </tr>
  <tr>
    <th scope="row">Product 3</th>
    <td class="btn opt-in"><label>
        <input name="radio3" type="radio" value=
        "radio5">
      </label></td>
    <td class="btn opt-out"><label>
        <input name="radio3" type="radio" value=
        "radio6">
      </label></td>
  </tr>
  <tr>
    <th scope="row">Product 4</th>
    <td class="btn opt-in"><label>
        <input name="radio4" type="radio" value=
        "radio7">
      </label></td>
    <td class="btn opt-out"><label>
        <input name="radio4" type="radio" value=
        "radio8">
      </label></td>
  </tr>
  <tr class="unsubscribe-section group">
    <th colspan="3" scope="row"><label title=
        "You will be Unsubscribed from items of this group only">Unsubscribe
        from all
        <input class="unsubs-chkbx-group" name="unsubs-chkbx-group-1"
        type="checkbox">
      </label></th>
  </tr>
</table>
<hr>
<table class="product-list">
  <tr>
    <th class="heading" scope="col">Heading 2</th>
    <th class="opt" scope="col">Subscribe</th>
    <th class="opt" scope="col">Unsubscribe</th>
  </tr>
  <tr>
    <th scope="row">Product 1</th>
    <td class="btn opt-in"><label>
        <input name="radio1a"...

CSS

body { padding:20px 0 0 20px; }

hr { display:inline-block; width:355px; border:none; border-top:#666 1px dotted; margin:10px 0; }

table { font:14px Arial; }
th, td { border:#ddd 1px solid; padding:2px 0; }

label { display:block; cursor:pointer; padding:3px; }
label:hover { background:#eee; }

.heading  { width:150px; font-style:italic; font-weight:bold; }
.opt, .btn { width:100px; text-align:center;  }


.unsubscribe-section label { float:right; padding:5px 10px; margin-right:33px; }
.unsubscribe-section label:hover { color:#000 !important; }
.unsubscribe-section label.active { color: #fff; }
.unsubscribe-section label input { margin-left:5px; }

input { cursor:pointer; }

.active { background:#666; }

JavaScript

//Check-Uncheck all items
$(".unsubs-chkbx-group").change(function() {
    var $table = $(this).closest('tbody');

    // uncheck all
    $('tr:not(.group) input', $table).prop('checked', false);
    $('label', $table).removeClass('active');

    if (this.checked) {
        var $elements = $('.opt-out', $table);
        $('label', $elements).addClass('active');
        $('input', $elements).prop('checked', true);
        $(this).parents('table').find(".unsubscribe-section label").addClass('active');
    }
});

$('tbody input[type=radio]').change(function() {
    var $element = $(this);
    var $row = $element.closest('tr');
    $('label', $row).removeClass('active');

    $element.parent().addClass('active');
});

//Uncheck the global 'Unsubscribe from all' checkbox when a subscribe option is selected
$(".opt-in input[type=radio]").click(function() {
    $('.unsubs-chkbx').attr('checked', false);
    //Uncheck the checkbox of a specific group
    $(this).parents('table').find('.unsubscribe-section input[type=checkbox]').attr('checked', false);
    //Remove the class .active from the checkbox label of a specific group
    $(this).parents('table').find('.unsubscribe-section label').removeClass('active');
});

//Check 'Unsubscribe from all' when all unsubscribe options have been selected, per group
$(".opt-out input[type=radio]").click(function() {
    if ($(this).parents('table').find(".opt-out input[type=radio]:checked").length == $(this).parents('table').find(".opt-out input").length) {
        $(this).parents('table').find(".unsubs-chkbx-group").attr('checked', 'checked');
        $(this).parents('table').find(".unsubscribe-section label").addClass('active');
    }
});